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.

Component status






Component preview

Usage of the component

  • To display several details about a single idea like a transfer at an airport.

  • To use common visual cues (icons and colors) to help users scan the details.

  • When you have many actions at once—use a button link.

  • You want to offer a less important action—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

Component structure

  1. IconLeft

    Optionally visually supports button visibility.

  2. Label

    Describes main action. Works best when short.

  3. IconRight

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


Identify the most important actions

If everything looks important, then nothing is important.

—Patrick Lencioni

Users need to be certain of what action to take next. You need to know which actions are the most important within a given section of the user flow.

Once you’ve identified which actions are the most important at the moment, you can indicate importance through size, type, 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.

Avoid disabled buttons

Many designers want to show users that actions will be possible in the future, so they end up using disabled buttons to show potential actions. But such buttons often end up confusing users about what’s possible.

Instead, try to focus on using progressive disclosure to show them only the actions they should take right at the moment. Then when it’s possible for them to take action, you can show them more buttons.

If you need to use a disabled button, always make it clear how users can activate it, such as with a tooltip.

Use actionable text

It should be clear from the button text exactly what happens when the user interacts with it. The labels should be actionable, such as “Add passenger” and “Book for (price)“.

Avoid long explanations in the button text. The text should be short and clear. If additional explanation is needed, add it above the button as text.

See examples for how to make actions clear.

Mobile vs. desktop size

While your first instinct on mobile devices might be to use smaller buttons and button links to take up less valuable space, this actually creates some issues. For example, placing a small button on one side of the screen makes it much harder to access for people using one hand (a button on the right is hard for left-handers to access).

Also, without clues like hover states, interactions in mobile devices are harder for users to guess.

So on small screens, buttons and button links should take up the full width. This makes them easy to access and hard to miss.

On wider screens, users are unlikely to be using only one hand and are used to hovering to find interactions. So buttons and button links can fit the size of their content.

Button types

Buttons come in three sizes (large, normal, and small) and three types (primary, secondary, and 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 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 secondary buttons or another component.

Use secondary small buttons for additional actions on the page

The secondary small button is great for actions in cards as it stands out from the interface but doesn’t take so much attention.

Use secondary buttons for items in loop

If you have a repeated view, use the secondary button for their main action. Primary buttons would offer too many choices to select from.

Don't use primary buttons to manipulate users

Making one primary and the other secondary would be manipulating the user towards our preferred choice.

Buttons with icons

Buttons with icons are great when you need to draw more attention to the action. Icons add additional context and makes the buttons more easy to scan.

But it’s essential to not overuse these buttons. If everything is grabbing attention, things usually get messy.

Use a left icon when the button adds another item

For cases like this, it’s great to use an icon with a plus to represent the addition, such as PlusCircle or PassengerAdd.

Right icons should only be directional

They can help explain what happens when the user interacts with the button. An icon (with an aria-label) makes it easier to know if the user is taken elsewhere.

Add a label when using icon-only buttons

Even the simplest icons like plus can be understood in many different ways. To make sure your icon is accessible, add a proper label to communicate the purpose.