Skip to main content

Button

Trigger interactions throughout the interface.

Buttons come in three types: regular, action, and other.

Usage​

Regular buttons​

Use regular buttons for high-priority actions. They come in five types: primary, secondary, more, destructive, and inverted.

View in StorybookExternal link icon

Primary​

Signifies the highest-priority action, and you should only use one primary button per page or modal.

Secondary​

Signifies other high-priority actions, so you can use multiple secondary buttons.

More​

Allows grouping the lower-priority actions in a compact dropdown. Avoid changing the button icon.

Destructive​

Signifies actions that have a destructive effect on the user data.

Inverted​

Provides contrast to dark backgrounds and images.

Action buttons​

Use action buttons for medium to lower-priority actions. They come in four types: primary, secondary, inverted, and destructive.

View in StorybookExternal link icon

Primary action​

Use for the lower-priority actions and can often accompany regular buttons.

Secondary action​

Use inside other components for the lower-priority actions (see Accordion, Modal).

Inverted action​

Use to implement secondary actions on dark backgrounds (see Toast, Banner).

Destructive action​

Use for actions that have a destructive effect on the user data.

Other buttons​

Use these buttons to implement their specific use cases. Three buttons belong to this category: filter, floating action, and back to top.

View in StorybookExternal link icon

Filter​

You can use a filter button to implement advanced filtering, and if there isn't enough space to display filters with Select. Avoid changing the button icon and label.

For more usage guidelines, see Table pattern.

Sort​

You can add a sort button to enable users to arrange content based on specific parameters, such as alphabetically or by date. The content is organized automatically once users select a sorting attribute from the sort context menu.

Floating action​

You can use a floating action button instead of a regular primary button to signify the highest-priority task. There should only be one floating action per page.

Avoid changing the button icon and place your floating action in the bottom-right corner of the page, with 16 px paddings.

Back to top​

You can use a back-to-top button to implement a simple scroll to the top of the page. The button should appear on the screen once the user starts scrolling.

Avoid changing the button icon and place your back-to-top button in the bottom-right corner of the page, with 16 px paddings.

Placement​

When designing page and component layouts, place buttons to the right.

Use only one highest-priority action—regular primary or floating action button—and place it in the rightmost position relative to all other actions (see Header).

Add 12 px of space between buttons.

Size​

  • Size S. Use for actions at the middle to low level of the page hierarchy or when the space is limited.
  • Size M. Use for actions at the top of the page hierarchy (see Header) or when providing only a few important actions to complete a workflow (see Side modal).

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the button's visual hover state and adds a 2px focus ring.
  • When an Action button icon is selected, instantly display a tooltip that shows the button's label.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Button Pattern for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.