Overview
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
- IconLeft
Optionally visually supports button visibility.
- Label
Describes main action. Works best when short. All labels use sentence case.
- 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 subtle button
Primary subtle buttons are less prominent than primary buttons and can be used for less important or repeating actions.
Critical button
Critical buttons are used for urgent or important actions, such as confirming a destructive action.
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.
Secondary button
Secondary buttons can be used for actions that are not the primary focus of the page.
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.
Guidelines
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.
Do
Don't
Show importance hierarchy
If you have multiple actions on one screen, use different button types and sizes to show different levels of importance.
Do
Don't