Skip to main content

Button

A button draws attention to important actions with a large selectable surface.


Primary Color

Component Preview



Component Code

<button class="usa-button" type="button">Default</button>
<button class="usa-button usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--active" type="button">Active</button>
<button class="usa-button usa-focus" type="button">Focus</button>
<button class="usa-button" type="button" disabled>Disabled</button>
<button class="usa-button" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Secondary Color

Component Preview



Component Code

<button class="usa-button usa-button--secondary" type="button">Default</button>
<button class="usa-button usa-button--secondary usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--secondary usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--secondary usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--secondary" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--secondary" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Accent Cool Color

Component Preview



Component Code

<button class="usa-button usa-button--accent-cool" type="button">Default</button>
<button class="usa-button usa-button--accent-cool usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--accent-cool usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--accent-cool usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--accent-cool" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--accent-cool" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Accent Warm Color

Component Preview



Component Code

<button class="usa-button usa-button--accent-warm" type="button">Default</button>
<button class="usa-button usa-button--accent-warm usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--accent-warm usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--accent-warm usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--accent-warm" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--accent-warm" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Base Color

Component Preview



Component Code

<button class="usa-button usa-button--base" type="button">Default</button>
<button class="usa-button usa-button--base usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--base usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--base usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--base" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--base" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Outline

Component Preview



Component Code

<button class="usa-button usa-button--outline" type="button">Default</button>
<button class="usa-button usa-button--outline usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--outline usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--outline usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--outline" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--outline" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Outline Inverse

Component Preview


Component Code

<button class="usa-button usa-button--outline usa-button--inverse" type="button">Default</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--hover" type="button">Hover</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--active" type="button">Active</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-focus" type="button">Focus</button>
<button class="usa-button usa-button--outline usa-button--inverse" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--outline usa-button--inverse" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>

Big Button

Component Preview



Component Code

<button class="usa-button usa-button--big" type="button">Default</button>
<button class="usa-button usa-button--big" type="button" disabled>Disabled</button>
<button class="usa-button usa-button--big" type="button" aria-disabled="true">aria-disabled</button>
<button class="usa-button usa-button--unstyled" type="button">Unstyled button</button>


Guidance

When to use the button component

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 the default button for next-step actions.
Use outline buttons for actions that happen on the current page.
Outline buttons work well for same-page actions like expanding content.
Give an important action a distinctive style.
Style the button most users should select 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 selectable.
Use color variations to distinguish static, hover, and active states.
Avoid using too many buttons on a page.
Too many buttons can overwhelm users and reduce decision quality.
Use sentence-case capitalization for button labels.
Keep labels natural and readable.
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 be helpful.
Consider adding an icon to signal specific actions (Download, Open in a new window, etc).

Accessibility guidance

Buttons should display a visible focus state when users tab to them.
Ensure keyboard users can see which element is focused.
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.

Using the button component

Always set the type attribute.
Define the purpose and behavior of a button with the type attribute. The type attribute can accept three values: submit, button, and reset. If no type attribute is defined, the button will behave as a submit button.
Use the disabled or aria-disabled attributes to turn on disabled button styles.
The disabled attribute hides the button from screen readers, while aria-disabled="true" keeps it visible to screen readers.
Add button styles to links.
To use a button style on a link, add the usa-button class to your link. Add an additional button variant class to access variant styles.

USWDS Documentation

For more guidance, view the USWDS Button Component Documentation.



Settings

Variable Description
$theme-button-border-radius

Button border radius for rounded corners.
$theme-button-font-family

Font family of the button.
$theme-button-icon-gap

Size of the gap between the button's text and icon.
$theme-button-small-width

Width of small buttons. Used to define the size of the header search button and small language selector button.
$theme-button-stroke-width

Stroke width of outline button variants.


Variants

Variant Description

.usa-button--secondary

Button uses secondary color.

.usa-button--accent-cool

Button uses accent-cool color.

.usa-button--accent-warm

Button uses accent-warm color.

.usa-button--base

Button uses base color.

.usa-button--outline

Transparent button with a color stroke.

.usa-button--inverse

Light color button for dark backgrounds.

.usa-button--big

A bigger button.

.usa-button--unstyled

A button that looks like a link.
Looking for U.S. government information and services?
Visit USA.gov