Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Buttons

Use buttons to signal actions.

Standard Buttons

Use the standard button styles to convey the most important action on you want the users to take. For actions outside of the top two actions, use the other buttons. See the USWDS Button Usage for more on how to use buttons.

Note: the vertical alignment of a button is governed by the layout grid.

Primary
<button class="usa-button">

Secondary
<button class="usa-button usa-button--outline">

Success
<button class="usa-button usa-button--success">

Danger
<button class="usa-button usa-button--danger">

<button class="usa-button usa-button--dropdown">Default <span class="caret inline-block ml-tiny" aria-hidden="true">&#9662;</span></button><br>
  <ul class="desktop-dropdown add-list-reset display-none">
    <li>
      <button class="usa-button--unstyled text-no-underline padding-right-1 padding-left-1 padding-bottom-1 padding-top-1 desktop-menu text-bold width-full">
        <span class="">Option 1</span>
      </button>
    </li>
    <li>
      <button class="usa-button--unstyled text-no-underline padding-right-1 padding-left-1 padding-bottom-1 padding-top-1 desktop-menu text-bold width-full">
        <span class="">Option 2</span>
      </button>
    </li>
  </ul>

Other Buttons

Use these buttons if the actions are not among the top two actions in a view, use an other button to convey action.

Function
<button class="usa-button usa-button--inverse usa-button--small">

Tertiary
<button class="usa-button usa-button--inverse usa-button--tiny">