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.