Lets the user take an action (this could change the state of the current page or navigate the user to a different page)

Code component(s): Button

Buttons are used to signal to the user that they can take an action. Unlike Link, buttons are not meant to be used inline. And unlike Icon Button, buttons include text.




Specify the text that explains to the user what will happen when they click/tap on the button


Choose between Small (32 px tall) or Medium (40 px tall, default)


Choose between Primary (default), Secondary, or Tertiary


Choose between Action (default) or Destructive


In some circumstances you may want to temporarily prevent the user from taking an action, yet still show them that the action may be valid in a different state


In some cicumstances you may want to indicate that an action that requires more than a moment of processing time is being taken. This option is only available for the Primary button style.


Specify if/how this component resizes horizontally


Stack buttons horizontally (or vertically on phones)

When you provide multiple related actions, stack them horizontally with 16 px of space between them. For phone form factors, prefer vertically stacking since horizontal space may be limited.

Place default actions to the right (or below on phones)

When you provide multiple related actions, place the button for the default (ie, most commonly expected) action to the very right. On phone form factors, place the default action at the bottom of the stack.

Only use one primary button per screen

The primary button styling can be visually overpowering, so use it sparingly to call attention to the main action the user needs to take on the screen

Keep labels concise

Keep labels concise so they’re fully visible across form factors and languages

Related components

We'll soon be deprecating this site. For the latest version of our documentation, go to our Storybook site!