Button

A Button represents an action or choice for the user.

Usage

Buttons are the main actionable items on a page. Buttons typically trigger a new UI element to appear on the page and are essential to submitting forms, beginning a new task, or navigating to the next step in a process.

When designing actions, Button variants imply hierarchy. Use Primary Buttons first, then use Secondary, Tertiary and Quaternary variants for other actions accordingly.

Guidelines

• Effective Button text uses precise, task-specific action verbs like: “Add”, “Remove”, “Read Details”, and “Submit”. Avoid ambiguous words like “Yes”, “No”, “OK”, and “Click Here”.
• Effective Button text is less than 20 characters.
• All button text should be in title case (capitalize the first letter of each word).
• Button text should never wrap to a second line.
• Button width should not exceed 280px.
• For navigational actions that appear within a line of text, use Link instead of Button.

Variants

Primary Button

Use for the most important action, with no more than two primary buttons per page. Use other button types and visually create a digestible content flow and hierarchy.

Secondary Button

Typically represents the second highest priority, following the Primary Button. There can be more than one on a page and can depict similar or different actions.

Tertiary Button

Can be paired with Primary and Secondary Buttons, and often represents the third priority on the page.

Quaternary Button

Use for the sign in buttons in the top navigation, or sometimes on a page for the least important actions.

States

Disabled

Represents an action that’s not currently available to the user. A disabled button 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 the Disabled Button at all.

Disabled - Primary

Disabled - Secondary

Disabled - Tertiary

Spinning

When data is being saved or submitted, a spinning indicator may 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.