Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.


Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Button Variants

A single screen in an application or web experience can include more than one button. To help users clearly understand Primary, Secondary, and Ghost actions, use caution in button placement. Let the action you want to trigger determine the correct button to choose.

Button Variants
  1. Primary Button: Primary buttons have high visual impact, and should be used for important, final actions that complete a flow, like Save or Confirm.

  2. Secondary Button: Secondary buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in a digital experience.

  3. Ghost Button: Ghost buttons are used for the lowest priority actions, especially when presenting multiple options. Ghost buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible.

  4. Icon Button: Icon buttons help people take minor actions with one tap. Use the standalone icon button sparingly- it is usually a part of another component.



Button anatomy diagram

Buttons can contain up to three elements:

  • A. Text label: short, call-to-action text.
  • B. Container: primary element that holds content, color, and icons.
  • C. Icon: optional, except in the icon button.


The most important thing is to establish a visual hierarchy between the buttons in your UI. Keep these best practices in mind.


A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.


Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only group together calls to action that have a relationship to one another.

Although secondary buttons have less visual prominence because they are less saturated than their primary counterparts, they are still visually heavy. If your layout requires multiple actions—as is the case with some toolbars, data lists and dashboards—low emphasis buttons (ghost) may be a better choice.


Alignment refers to whether the buttons are aligned to the right or the left of a window, container, or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they’re contained within another component.

As a general rule, on full-page designs, the primary button is on the left side of the page. When the browser window is large and the user is scrolling to read, it’s best to have the primary button where the user’s attention has been focused all along. Whereas in wizards, where a user is progressing through a series of steps or dialog windows, the primary action traditionally sits at the bottom right. Buttons within components such as notifications, search fields, and data tables are also right-aligned.

In some cases a button group—or even a single button in the case of a side panel or small tile—may span the entire width of a window or container.

Responsive Layout

When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.

The size and placement of buttons can change as parent containers, such as cards, adapt for larger screens.

Responsive button groups

Button Groups

Button groups are a useful way of aligning buttons that have a relationship. Group the buttons logically into sets based on usage and importance. Too many calls to action will overwhelm and confuse users so they should be avoided.

Horizontal button group spacing diagram

On Large, Medium and Small breakpoints, arrange button groups horizontally. The width of each button will be determied by its label length.

Vertical button group spacing diagram

On X-Small breakpoints, arrange button groups vertically


Text Labels

A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user interacts with it. Buttons need to be clear and predictable.

Make sure button labels are unique and descriptive. Labels like “Click here” and “Read more” don’t provide context. In addition, some screen reader users also navigate via a list of all the buttons on a page or screen. Therefore, all button labels should provide an indication of what will happen if activated. For examples of acceptable labels, see the WCAG Content Guidelines.

WCAG 2.1: 1.3.1 Info and Relationships


Primary Button

The Primary button is the default action. When dialogs appear, the primary button typically takes focus. On a form, if focus is on a component that is not actionable with the Enter key, pressing Enter will activate the primary button.

Where links have been ‘repurposed’ as a button, they need to be coded so the Space key can also activate (since links are only activated by default by Enter).



Users can trigger a button by clicking anywhere within the button container.


Users can trigger a button by pressing Enter or Space while the button has focus.


Buttons with icons

Icons can be placed next to labels to both clarify an action and call attention to a button. There are certain instances where an icon will suffice in place of a text label, but use icon buttons cautiously.

  • Use 20px glyphs within buttons
  • Glyphs should always appear to the right of the text
  • Glyphs used in buttons must be directly related to the action that the user is taking
  • Glyphs must be the same color value as the text within a button

Buttons with icons

Icon buttons allow users to take actions, and make choices, with a single tap. Icon buttons can take the form of a filled, outline, or ghost variant. For detailed guidance on using icon buttons, please refer to the icon button documentation.