Buttons allow users to take actions, and make choices, with a single click or tap.

Buttons communicate actions that users can take. Our design system distinguishes four button styles for specific needs.

  • Standard
  • Outlined
  • Contained
  • CTA (Call To Action)

Buttons can include a leading or trailing icon. Buttons are available in four sizes: small, medium, large and extra-large.

In general, use buttons for all interface actions on the current screen that are not links to other views in the application. Use large buttons except where design requirements mandate using a different button size; for example, if your UI has limited space, or to satisfy size-related accessibility requirements.

To prevent a button label wrapping (for example, if the label is very long), the labelOverflow property can be set to "ellipsis". See live demo below (select "Contained Button - with ellipsis" in dropdown)

  1. Container
  2. Border
  3. Fill
  4. Leading icon (optional)
  5. Text label
  6. Trailing icon (optional)

The button with leading icon variations extend a standard button component, inserting an icon before the text label. Similarly, the button with trailing icon variation adds an icon after the text label. These variations provide a compact alternative to using separate button and icon components.

Use a leading or trailing icon to signify the action performed when the button is selected.

Leading icons change their position based on LTR or RTL contexts.

  1. Standard – Standard buttons are the default type of button to use in your UI. Use a standard button when none of the other button types are applicable. Standard buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, standard buttons help maintain an emphasis on card content.
  2. Outlined – Outlined buttons are low-emphasis buttons that always have the visual appearance of a button (unlike standard buttons which appear as text in the enabled state). Use outlined buttons for optional actions in your UI. Outlined buttons can be used interchangeably with standard buttons.
  3. Contained – Contained buttons are medium emphasis buttons, offering a lower emphasis alternative to CTA buttons or a higher emphasis alternative to outlined buttons. Use emphasis buttons for actions that are important but aren't the primary action.
  4. CTA – CTA (Call To Action) buttons are prominent, high-emphasis buttons that represent primary actions. Use a CTA button on each screen/page in your UI to communicate to the user which action they are expected to take.

Note: The button type properties should be used singly rather than in combination.

Button size is based on an integral number of nudges, where 1 nudge is 8px (img).

  1. Small – Based on a height of 3 nudges (24 px)
  2. Medium – Based on a height of 4 nudges (32 px)
  3. Large – Based on a height of 5 nudges (40 px), using 18px icons
  4. X-Large – Based on a height of 6 nudges (48 px)

Buttons are interactive components that respond visually to user actions and system-initiated events.

Buttons are interactive components that provide visual feedback when the pointer hovers over them.

Buttons provide visual feedback when pressed, in the form of a ripple fill.

The primary action area of a button is the button surface. Click or tap a button to initiate the action linked to it. If a button is in the disabled state, no action will take place.

A button may perform a supplemental action when you click or point the cursor at it. For example, it may display a menu.

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

For more information about buttons, see:

Related components: