Button
Buttons allow users to trigger an action.
When to use
- Making a choice or selection
- Manipulating a element (such as closing a modal)
- Moving in a multi-step process
When not to use
- Linking to another page or a web site
- Linking to another section of the current page
- For phones or addresses that open in the external programs
Types
There are three main types:
Solid
Use solid buttons for the most prominent actions on a screen such as:
- Sign up
- Submit
- Place order
Outlined
Use outlined buttons for actions that are less important on a screen. Most buttons on the page will be outlined. They can be used by themselves or in a group.
Text
Use text buttons for actions that are the least important on a screen. They can be used by themselves or in a group.
Subtypes
Button subtypes are used when the default button color doesn't have sufficient contrast with the background.
Standard
Standard buttons are the most common button types on a screen. Use them for actions that are moderately prominent. Standards buttons work on a lighter page backgrounds.
If the standard button doesn't provide 3:1 color contrast with the page background, use reversed or high-contrast buttons instead.
Reversed
Vel eaque sapiente id deserunt rerum vel corporis vitae sit velit Quis ea dolorum doloribus.
High-contrast
In unde molestiae At aliquid consequuntur ea quia aliquid aut maxime quod sed doloribus vero.
Content Strategy
- Avoid punctuation
- Use 20 character at most
- Start with a verb clearly indicating an action
- Avoid unnecessary words and articles
- Use sentence case
Specify what happens upon clicking on a button
Avoid unclear button text
Behavior
Text reflow
- If button text exceeds the width of its container, the text will left-align and wrap to the next line.
- Do not truncate button text.
Change Log
| Date | Description of change | Reason |
|---|---|---|
| MM/DD/YYYY | Description of change | Reason |