Also known as:
Link buttonPrimary actionSecondary actionDefault actionDestructive action

Button

Buttons perform actions.

Need to know

  • Buttons perform actions.
  • If it needs to navigate somewhere and can be opened in a new tab, use a link instead.

To keep in mind

  • All buttons use a button element (not a link element and no role=”button”)
  • All buttons have a label:
    • no more than 2 to 3 words long
    • use verbs first; use only verbs where possible e.g. “Save”
    • avoid unnecessary words and articles, such as “the” or “a”
    • use sentence case
    • DON’T use long phrases as label
    • DON’T have finishing punctuation
    • DON’T have text overflowing across 2 lines—this can sometimes happen when the label is translated from a 3-word English label
  • All buttons have a large click target of 48px to meet minimum touch target sizes
  • Default action button:
    • Use this when there is more than 1 button or it is not the most important action on the page
  • Primary action button:
    • Use only 1 primary action button per page
  • Destructive action button:
    • Only use when the action will result in data loss, cannot be undone, or otherwise have significant consequences
  • Secondary action button:
    • Secondary Action Buttons kind of look like links but have lots of padding, a large clickable area, and sit next to other buttons, such as a Primary button. That is, they perform actions and do not navigate.
  • Icon + label (icon on the left):
    • RTL: flip the direction of arrow icons when the user is using a right-to-left language
  • Label + icon (icon on the right):
    • RTL: flip the direction of arrow icons when the user is using a right-to-left language
  • Disabled buttons:
    • Only disable buttons immediately after a user clicks a button to prevent duplicate actions or when removing the disabled button would be conspicuous. For example, if removing the button would mess up the layout, confuse users about its absence, or make it unclear that usually more actions are possible.
    • If you need to disable a button, help users (including people using assistive technologies such as screen reader) understand how to enable it again. For example, include nearby microcopy that explains why it is disabled and what action the user can take e.g. “There are no more reports to share. To share more reports, wait for a survey to close.”
  • Button with tooltip…?

When to use

A button indicates to a user that they can perform an action on this page, such as:

  • Apply an action to an object, e.g. save, delete, add an item, undo, create a new item
  • Submit a form to send data
  • Start a new task
  • Trigger a new element to appear on the page e.g. toggle additional information, open a modal
  • Trigger the next step in a process

When not to use

  • Don’t use a button when navigation is involved. Instead, use a link.
  • If the button is used to toggle between 2 states, use a Toggle Switch instead.

See also

External Links

Here are some examples of other existing design systems: