Button

An interactive element that represents an action or choice.

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.
  • Primary Button
  • Secondary Button
  • Tertiary Button
  • Quaternary Button

Variants

Primary Button

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

Secondary Button

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

Tertiary Button

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

Quaternary Button

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

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

Disabled - Secondary

Disabled - Tertiary

Spinning

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

Spinning - Primary

Spinning - Secondary

Spinning - Tertiary

Full Width at Smaller Viewports

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

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.