Use buttons to draw attention to important actions.
Accent cool color
Accent warm color
When to use the button component
- Important actions. Use buttons for the most important actions you want users to take on your site, such as
When to consider something else
- Linking between a site’s pages. Use regular links instead.
- If the action is less popular or less important. Less popular or less important actions may be visually styled as links.
- Use standard buttons for actions that go a next step.
- Use outline buttons for actions that happen on the current page.
- Give an important action a distinctive style. Style the button most users should click in a way that distinguishes it from other buttons on the page. Try using the
usa-button--bigvariant or the most visually distinct color variant.
- Make sure buttons look clickable. Use color variations to distinguish static, hover, and active states.
- Avoid using too many buttons on a page.
- Use sentence case for button labels.
- Keep button text short. Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example,
- Lead with a verb. Make the first word of the button’s text a verb. For example, instead of
Complaint filinglabel the button
File a complaint.
- Icons can also be helpful. At times, consider adding an icon to signal specific actions (
Open in a new window, etc).
- Buttons should display a visible focus state when users tab to them.
- Use standard markup. Avoid using
<img>tags to create buttons. Screen readers don't automatically know either is a usable button.
- Screen readers handle buttons and links differently. When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
- The examples demonstrate how to use button elements. To use a button style on a link, add the
usa-buttonclass to your link.
- To use a different style button on your link, add button variant classes in addition to
- For example, a secondary button style would use the following code:
<a class="usa-button usa-button--secondary" href="/my-link">My button</a>
This component has no settings.
|usa-button--secondary||The secondary style of button.|
|usa-button--accent-cool||Button with a accent-cool background.|
|usa-button--accent-warm||Button with a accent-warm background.|
|usa-button--base||Button with a base gray background.|
|usa-button--outline||Transparent button with a stroke.|
|usa-button--inverse||Outlined button for dark backgrounds.|
|usa-button--big||A bigger version of the default button.|
|usa-button--unstyled||A button that looks like a link.|