Navigation
input
Floating
Display

Button

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.

Anatomy

Options

Label

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

Size

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

Variant

Choose between Primary (default), Secondary, or Tertiary

Color

Choose between Action (default) or Destructive

Disabled

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

Loading

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.

Width

Specify if/how this component resizes horizontally

Guidelines

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