Button

An interactive element that represents an action or choice.

Developer Documentation

See the code and developer guidelines for this component.

Usage

Use Buttons to represent the main actions on a page.

Examples of Button usage:

  • To trigger a new UI element to appear on the page.
  • To submit a form.
  • To begin a new task.
  • To navigate to the next step in a process.

Guidelines

  • Button Text
    • Use precise, task-specific action verbs like: “Add”, “Remove”, “Read Details”, and “Submit”.
    • Avoid ambiguous words like “Yes”, “No”, “OK”, and “Click Here”.
    • Use title case (capitalize the first letter each word)
    • Use less than 20 characters.
    • Never wrap to a second line.
  • Button width should not exceed 280px.
  • Do not use buttons in paragraphs or within a lines of text. Use Link instead.
  • Use Button variants to create action hierarchy within a page. Variant names imply their placement within that hierarchy.

Variants

Primary Button

Reserve for the most important action on the page. Use no more than two per page.

Developer Documentation

See the code and developer guidelines for this component.

Secondary Button

Represents the second-highest priority, following the Primary Button. There can be more than one on a page.

Developer Documentation

See the code and developer guidelines for this component.

Tertiary Button

Represents the third-highest priority on the page. Pair with Primary and Secondary Buttons.

Developer Documentation

See the code and developer guidelines for this component.

Quaternary Button

Represents the least important action on a page. Also used for the Sign In buttons at the top of navigation.

Developer Documentation

See the code and developer guidelines for this component.

States

Disabled

Represents an action that’s not currently available to the user. It implies that the Button would be available given a certain set of circumstances.

Since a user can’t interact with this Button, consider if it’s necessary to show it at all.

Disabled - Primary

Developer Documentation

See the code and developer guidelines for this component.

Disabled - Secondary

Developer Documentation

See the code and developer guidelines for this component.

Disabled - Tertiary

Developer Documentation

See the code and developer guidelines for this component.

Spinning

Use when data is being saved or submitted. The spinning indicator will replace the Button text.

Spinning - Primary

Developer Documentation

See the code and developer guidelines for this component.

Spinning - Secondary

Developer Documentation

See the code and developer guidelines for this component.

Spinning - Tertiary

Developer Documentation

See the code and developer guidelines for this component.

Full Width at Smaller Viewports

At small viewport sizes, a Button may be used at full width.

Developer Documentation

See the code and developer guidelines for this component.

Anatomy

  • A Button must contain text and/or an Icon

Accessibility

  • If a Button only includes an Icon with no text, alternative text must be provided.