Refine By

Buttons

  • Contents:

Buttons are highly visible elements that trigger an action when the user interacts with them. They’re often used for media controls or calls to action. While they’re generally rectangular elements, buttons may also be styled according to OS-specific guidelines. 

Guidelines

 
  • Use shape and color to make sure a button looks like a button.
  • Use a rectangular shape unless the OS indicates otherwise.
  • Button labels should always be clear and actionable.
  • Keep the labels short and to the point: use verbs where possible.
  • Use title case for button labels. See Capitalization

“A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.”
Buttons, Google’s Material Design

  • Ensure buttons are big enough for touch on mobile.
  • We recommend two button heights for web: 48px or 52px tall. See WCAG 2.1 specifications.
  • Place buttons where users can easily find them.

Disabled Button

  • Disable all inactive buttons.
  • Disabled Buttons are not clickable and does not need to meet 4.5:1 contrast or 3:1 for large text requirement when aria-disabled=”true” is included.
  • Give users clear explanations why a Button is disabled and what they need to do to make it enable

Hierarchy

Primary

Use the primary button for the intended action in a flow. Like any call to action, these shouldn’t be destructive (like “Delete” or “Cancel”) or introduce friction unless that’s the intended interaction.

We use a solid color and title casing for primary buttons to draw the user’s attention and guide them through the flow.

Secondary

Use secondary buttons for options that change, counter, or cancel the intended action, or when option impacts the user’s journey with a new flow or new view.

We use outlined (sometimes called “ghosted”) buttons and title casing for secondary buttons.

Tertiary and beyond

Use tertiary buttons for options that don’t counter or change the intended action or that return the user to an existing flow, like closing a modal.

Tertiary buttons are styled as text links, but with extra padding around them. They’ll use sentence case unless your platform uses a different pattern. Check with our capitalization guidelines or with your team’s copywriter.

Hierarchy exceptions

System-specific components

Some platform-specific components, like iOS or Android dialogs, don’t follow our button hierarchy.

Friction

While we typically expect the primary button to move the user forward, dialogs and modals introducing friction intend to slow the user down.

Used wisely, friction can encourage the user to pay more attention to destructive or permanent options – and give them the chance to back out. These interactions may seem counterintuitive.

Consider a case where the user clicks “Cancel” before completing their flow. If we want them to finish, we may present a dialog asking them to confirm that they want to leave. Contrary to a lower-friction hierarchy, the primary button may say “Stay Here,” effectively cancelling their “Cancel” action, while the secondary button may say “Continue”, allowing them to press forward knowing that their progress will be lost.

Button placement

 

Buttons in full-width views

If actionable content is spread across an entire view, and buttons pertain to an action performed on all of the content as a group, the buttons should be right-aligned.

Most Western users’ focus moves from upper left to bottom right. This is mirrored for cultures with right-to-left text: their focus will move from top right to bottom left.

“Any buttons in the bottom right of a dialog should dismiss the dialog. An action button, which initiates the dialog’s primary action, should be farthest to the right. A Cancel button should be to the immediate left of the action button. If a third dismissal button exists, it should be to the left of the Cancel button.”

MacOS button placement is described in Apple’s Human Interface Guidelines

 

Buttons in smaller sub-sections

Align buttons with the content they pertain to. Even if that content is only a small portion of the screen. We want to draw the user’s attention to the content they can take action on.

The primary action should be aligned with the content. The user’s attention should flow in a direct, logical line: Answer A, Answer B, Answer C, Submit.

Secondary and destructive actions, i.e. “Cancel,” should be outside the direct attention flow, to minimize potential user error.

Style

 

Accessibility

 
  • A button should only be used to initiate an action or as a control. Actions include submitting a form, triggering modal content, and revealing hidden content. Controls include changing carousel slides or playing a video. If you just want to open another page, use a link instead.

  • Use semantic elements, not styling to create buttons. Buttons’ role ensures that users can activate the command from the keyboard using both the spacebar and the enter key without additional coding.
  • Style the button element with CSS, using proper color contrast is used, including contrast between the button and its background, as well as the contrast of text added to the button. Note: Active buttons require sufficient contrast (a ratio of 4.5:1), but inactive or disabled buttons don’t need to.