Displays a single important action a user can take.


Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs, Forms, Toolbars, etc. Buttons help users to perform tasks or trigger processes.

Usage of the component

  • To indicate primary action.

  • When you need to make the action look distinct enough.

  • When you need to fill up the space to match the rest of UI.

  • You want to offer a less important action or save some space — use a button link.

  • To make text inside paragraphs or lists actionable — use a text link.

  • So users can sign in using a social service — use a SocialButton.

Component playground

Look & feel

Component structure

  1. IconLeft

    Optionally visually supports button visibility.

  2. Label

    Describes main action. Works best when short. All labels use sentence case.

  3. IconRight

    Optionally shows the action for the button (expandable, link, etc.).

Button types

Buttons come in three sizes (large, normal, small) and three types (primary, secondary, critical). Two of these types (primary and critical) also have subtle versions in lighter shades to show actions that don’t draw as much attention.

Primary button

Primary buttons are the most important buttons and should be used for the main call to action on the page.

Primary button

Primary subtle button

Primary subtle buttons are less prominent than primary buttons and can be used for less important or repeating actions.

Primary subtle button

Critical button

Critical buttons are used for urgent or important actions, such as confirming a destructive action.

Critical button

Critical subtle button

Critical subtle buttons are less prominent versions of critical buttons and can be used for less important actions like initiating a destructive flow.

Critical subtle button

Secondary button

Secondary buttons can be used for actions that are not the primary focus of the page.

Secondary button

White button

White buttons should be used on dark backgrounds.

White button

Button hierarchy

Every screen needs a clear visual hierarchy of buttons and other interactive components. Primary buttons are best for the single primary action on the screen. Critical buttons work for destructive actions — actions users can’t take back. All remaining actions can be Primary subtle buttons, Secondary buttons or Tertiary buttons — mostly ButtonLink or TextLink.

You don’t have to use every step of the hierarchy - you can skip a level if there’s no use for it in the context of a screen.


Order actions by their importance

If everything looks important, then nothing is important.

—Patrick Lencioni

Users need to be certain of what action to take next. Once you’ve identified which actions are the most important at the moment, you can indicate importance through type, size and variation.

Have one primary action

Every screen should have only one button that represents the most important action. It leads the user to the next step.



Show importance hierarchy

If you have multiple actions on one screen, use different button types and sizes to show different levels of importance.



Use subtle buttons for items in loop

If you have a set of repeating components, use the primary subtle button for their main action. Alternatively, you can use the secondary button, but it’s not recommended for more prominent actions.