An interactive element that represents an action or choice.
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.
- 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.
Reserve for the most important action on the page. Use no more than two per page.
Represents the second-highest priority, following the Primary Button. There can be more than one on a page.
Represents the least important action on a page. Also used for the Sign In buttons at the top of navigation.
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
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.
- A Button must contain text and/or an Icon
- If a Button only includes an Icon with no text, alternative text must be provided.