A button triggers an event or action. It informs the visitor that something will happen next.
Buttons add visual prominence to the call to action and provide feedback on completed actions.
- Move visitors through a process: Submit, Next, Search, Save
- Highlight a top task: Learn more, Get started, Join us, Visit
- Reverse an action: Cancel, Previous, Reset, Delete
- Pause a process: Save as draft
Available button colors are based on your selected color theme.
When and how to use it
Use buttons to communicate actions users can take to interact with a page. Buttons should be used consistently for the same types of tasks.
A primary action button (filled in button) has the highest emphasis. Try to limit the number of primary action buttons on a page as they are distracting.
The secondary action button (outlined button) has a lower emphasis, but should still be used sparingly.
Buttons should be used to help people:
- Submit a form
- Begin a task
- Make new elements appear on the page
- Identify a new or next step in a process
Color alone does not convey the meaning of buttons. Be sure to match your button text with the meaning you are trying to communicate with color.
Keep in mind that not everyone will be able to see your button color, so the message should be clear without it.
How not to use it
Avoid using multiple buttons on a single page.Avoid using disabled buttons as they can be inaccessible and confusing to some visitors. If you must use a disabled button, inform visitors why the button is disabled and how to enable it.
Standard accessibility review
Each time a new component version is published: