A Button represents an action or choice for the user.
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.
- 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.
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.
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.
Can be paired with Primary and Secondary Buttons, and often represents the third priority on the page.
Use for the sign in buttons in the top navigation, or sometimes on a page for the least important actions.
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
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.
- A Button must contain text and/or an Icon
- If a Button only includes an Icon with no text, alternative text must be provided.