Buttons

Button usage

A Button is used to fire any action when a user interacts with it, including submitting Forms. Unlike Links, they do not perform navigation. In Cosmos, Buttons are typically found throughout the UI such as in Cards, Forms, and Modals.


Variations

Different variations of buttons communicate different actions to the user.

  • Primary - Primary Buttons should be used only for the principal call to action in a region. Generally there should be only one primary Button visible at a timePrimary button example
  • Secondary - Default button style. Reserved for secondary actions on the pageSecondary button example
  • Tertiary - Reserved for actions related to a specific widget or card. Tertiary Buttons look stylistically like a Link; however, they are tagged as a Button, so screen readers know not to take users to another page. Icon-only buttons typically use the Tertiary styleTertiary button example
  • Floating action button - Reserved for the primary action on page when using a mobile device. They are typically styled like a Primary buttonFloating action button example

Language

Because buttons are used to perform actions, they should be labeled like so: Verb then Object, or only Verb. Using this labeling guidance, add a clear message of what the user should expect to happen after each click, such as "Submit form" or "Submit."

In general, "positive" actions, which move work forward, are displayed on the right (e.g., “Submit", "Save", "Next", "Accept", or "Reject"); and "negative" actions, which cancel or move work backward, are displayed on the left (e.g., "Back", or "Cancel").

Layout

The primary action, represented by the primary button, should be in the right corner of the action area. Supporting actions, represented by the secondary button styling, appear to the left of the primary action. These principles apply when using buttons in overlays, modals, page headers, assignment areas, and repeating lists.

When buttons are in a horizontal layout, they should spaced 8px from each other.

button placement example

Last updated: Oct 2020