Use buttons to draw attention to important actions.
Default
Default
Hover
Active
Focus
Disabled Unstyled button
Secondary color
Default
Hover
Active
Focus
Disabled Unstyled button
Accent cool color
Default
Hover
Active
Focus
Disabled Unstyled button
Accent warm color
Default
Hover
Active
Focus
Disabled Unstyled button
Base color
Default
Hover
Active
Focus
Disabled Unstyled button
Outline
Default
Hover
Active
Focus
Disabled Unstyled button
Outline inverse
Default
Hover
Active
Focus
Disabled Unstyled button
Big button
Default
Unstyled button
Component code
<h6>Default</h6>
<button class="usa-button ">Default</button>
<button class="usa-button usa-button--hover">Hover</button>
<button class="usa-button usa-button--active">Active</button>
<button class="usa-button usa-focus">Focus</button>
<button class="usa-button " disabled>Disabled</button><button class="usa-button usa-button--unstyled">Unstyled button</button>
<h6>Secondary color</h6>
<button class="usa-button usa-button--secondary">Default</button>
<button class="usa-button usa-button--secondary usa-button--hover">Hover</button>
<button class="usa-button usa-button--secondary usa-button--active">Active</button>
<button class="usa-button usa-button--secondary usa-focus">Focus</button>
<button class="usa-button usa-button--secondary" disabled>Disabled</button><button class="usa-button usa-button--secondary usa-button--unstyled">Unstyled button</button>
<h6>Accent cool color</h6>
<button class="usa-button usa-button--accent-cool">Default</button>
<button class="usa-button usa-button--accent-cool usa-button--hover">Hover</button>
<button class="usa-button usa-button--accent-cool usa-button--active">Active</button>
<button class="usa-button usa-button--accent-cool usa-focus">Focus</button>
<button class="usa-button usa-button--accent-cool" disabled>Disabled</button><button class="usa-button usa-button--accent-cool usa-button--unstyled">Unstyled button</button>
<h6>Accent warm color</h6>
<button class="usa-button usa-button--accent-warm">Default</button>
<button class="usa-button usa-button--accent-warm usa-button--hover">Hover</button>
<button class="usa-button usa-button--accent-warm usa-button--active">Active</button>
<button class="usa-button usa-button--accent-warm usa-focus">Focus</button>
<button class="usa-button usa-button--accent-warm" disabled>Disabled</button><button class="usa-button usa-button--accent-warm usa-button--unstyled">Unstyled button</button>
<h6>Base color</h6>
<button class="usa-button usa-button--base">Default</button>
<button class="usa-button usa-button--base usa-button--hover">Hover</button>
<button class="usa-button usa-button--base usa-button--active">Active</button>
<button class="usa-button usa-button--base usa-focus">Focus</button>
<button class="usa-button usa-button--base" disabled>Disabled</button><button class="usa-button usa-button--base usa-button--unstyled">Unstyled button</button>
<h6>Outline</h6>
<button class="usa-button usa-button--outline">Default</button>
<button class="usa-button usa-button--outline usa-button--hover">Hover</button>
<button class="usa-button usa-button--outline usa-button--active">Active</button>
<button class="usa-button usa-button--outline usa-focus">Focus</button>
<button class="usa-button usa-button--outline" disabled>Disabled</button><button class="usa-button usa-button--outline usa-button--unstyled">Unstyled button</button>
<h6>Outline inverse</h6>
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
<button class="usa-button usa-button--outline usa-button--inverse">Default</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--hover">Hover</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--active">Active</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-focus">Focus</button>
<button class="usa-button usa-button--outline usa-button--inverse" disabled>Disabled</button><button class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled">Unstyled button</button>
</div>
<h6>Big button</h6>
<button class="usa-button usa-button--big">Default</button>
<button class="usa-button usa-button--big usa-button--unstyled">Unstyled button</button>
<h6> Default</h6>
<button class= "usa-button " > Default</button>
<button class= "usa-button usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--active" > Active</button>
<button class= "usa-button usa-focus" > Focus</button>
<button class= "usa-button " disabled > Disabled</button><button class= "usa-button usa-button--unstyled" > Unstyled button</button>
<h6> Secondary color</h6>
<button class= "usa-button usa-button--secondary" > Default</button>
<button class= "usa-button usa-button--secondary usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--secondary usa-button--active" > Active</button>
<button class= "usa-button usa-button--secondary usa-focus" > Focus</button>
<button class= "usa-button usa-button--secondary" disabled > Disabled</button><button class= "usa-button usa-button--secondary usa-button--unstyled" > Unstyled button</button>
<h6> Accent cool color</h6>
<button class= "usa-button usa-button--accent-cool" > Default</button>
<button class= "usa-button usa-button--accent-cool usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--accent-cool usa-button--active" > Active</button>
<button class= "usa-button usa-button--accent-cool usa-focus" > Focus</button>
<button class= "usa-button usa-button--accent-cool" disabled > Disabled</button><button class= "usa-button usa-button--accent-cool usa-button--unstyled" > Unstyled button</button>
<h6> Accent warm color</h6>
<button class= "usa-button usa-button--accent-warm" > Default</button>
<button class= "usa-button usa-button--accent-warm usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--accent-warm usa-button--active" > Active</button>
<button class= "usa-button usa-button--accent-warm usa-focus" > Focus</button>
<button class= "usa-button usa-button--accent-warm" disabled > Disabled</button><button class= "usa-button usa-button--accent-warm usa-button--unstyled" > Unstyled button</button>
<h6> Base color</h6>
<button class= "usa-button usa-button--base" > Default</button>
<button class= "usa-button usa-button--base usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--base usa-button--active" > Active</button>
<button class= "usa-button usa-button--base usa-focus" > Focus</button>
<button class= "usa-button usa-button--base" disabled > Disabled</button><button class= "usa-button usa-button--base usa-button--unstyled" > Unstyled button</button>
<h6> Outline</h6>
<button class= "usa-button usa-button--outline" > Default</button>
<button class= "usa-button usa-button--outline usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--outline usa-button--active" > Active</button>
<button class= "usa-button usa-button--outline usa-focus" > Focus</button>
<button class= "usa-button usa-button--outline" disabled > Disabled</button><button class= "usa-button usa-button--outline usa-button--unstyled" > Unstyled button</button>
<h6> Outline inverse</h6>
<div class= "bg-base-darkest padding-1" style= "max-width: fit-content" >
<button class= "usa-button usa-button--outline usa-button--inverse" > Default</button>
<button class= "usa-button usa-button--outline usa-button--inverse usa-button--hover" > Hover</button>
<button class= "usa-button usa-button--outline usa-button--inverse usa-button--active" > Active</button>
<button class= "usa-button usa-button--outline usa-button--inverse usa-focus" > Focus</button>
<button class= "usa-button usa-button--outline usa-button--inverse" disabled > Disabled</button><button class= "usa-button usa-button--outline usa-button--inverse usa-button--unstyled" > Unstyled button</button>
</div>
<h6> Big button</h6>
<button class= "usa-button usa-button--big" > Default</button>
<button class= "usa-button usa-button--big usa-button--unstyled" > Unstyled button</button>
Guidance
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 Download
, Sign up
or Log out
.
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.
Usability guidance
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--big
variant 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, Download
, View
or Sign up
).
Lead with a verb. Make the first word of the button’s text a verb. For example, instead of Complaint filing
label the button File a complaint
.
Icons can also be helpful. At times, consider adding an icon to signal specific actions (Download
, Open in a new window
, etc).
Accessibility
Buttons should display a visible focus state when users tab to them.
Use standard markup. Avoid using <div>
or <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.
Implementation
The examples demonstrate how to use button elements. To use a button style on a link, add the usa-button
class to your link.
To use a different style button on your link, add button variant classes in addition to usa-button
:
usa-button--secondary
usa-button--base
usa-button--accent-cool
usa-button--accent-warm
usa-button--outline
usa-button--inverse
usa-button--big
usa-button--unstyled
For example, a secondary button style would use the following code:
<a class="usa-button usa-button--secondary" href="/my-link">My button</a>
Button settings
This component has no settings.
Button variants
Variant
Description
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.
Package information
Package usage: @import usa-button
Requires: required
, global