Overview
A button lets users take a specific action or complete a task. The button tells users exactly what will happen when they interact with it.
Button labels are short and clear. They should be written in sentence case.
Variants
Buttons are available in four styles: primary, secondary, ghost, and icon.
| Style | Description | Use cases | Tips |
|---|---|---|---|
| Primary | For the most important call to action. Includes link text. |
| Only use one primary button per page or section. |
| Secondary | For helpful but non-essential actions. Includes link text. |
| Don't use this style alone. Always pair with a primary button. |
| Ghost | For low-priority actions. Includes link text. |
| Use this when presenting multiple buttons together. |
| Icon | For well-established actions and design patterns when it's important to save space. |
| Use sparingly. Provide content and context to help the user understand what will happen when they trigger the button. |
Usage
When to use
Use a button when a user will trigger an action.
When not to use
Do not use a button to send users to a different page or section. Instead, use a link.
Accessibility
Every button needs a clear label that says what it does.
Avoid vague labels like:
- Click here.
- Learn more.
- Read more.
Instead, use specific labels like:
- Submit form.
- Cancel request.
- Begin application.
When using an icon button, you must provide alt text to describe the button’s action.