Components

Buttons

Buttons are UI elements that signal actions. They should be used sparingly; each additional button on a page reduces the visual prominence of a call to action. In contrast, links should lead users to another page or further information. Buttons that appear in a group together with other buttons should be wrapped in a container with the m-btn-group class to properly space the buttons across screen sizes.

Types

Primary button

Use a primary button for an action that goes to the next step. Avoid using multiple primary buttons on a single page; there can be multiple secondary buttons per page.

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn" title="Default state">Default state</button>

  <button class="a-btn hover" title="Hovered state">Hovered state</button>

  <button class="a-btn focus" title="Focused state">Focused state</button>

  <button class="a-btn active" title="Active state">Active state</button>
</div>

Implementation details

For accessibility reasons, use the semantic <button> instead of a link when possible.

Apply the a-btn class to a link, button and submit input field to receive the atomic button styles. For more information, see cf.gov refresh documentation on atomic styles.

Secondary button

Use a secondary button for actions that happen on the current page.

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn a-btn--secondary" title="Default state">Default
  state</button>

  <button class="a-btn a-btn--secondary hover" title="Hovered state">Hovered state</button>

  <button class="a-btn a-btn--secondary focus" title="Focused state">Focused state</button>

  <button class="a-btn a-btn--secondary active" title="Active state">Active state</button>
</div>

Disabled button

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn a-btn--disabled" title="Default state"
  disabled>Default state</button>

  <button class="a-btn a-btn--disabled hover" title="Hovered state" disabled>Hovered state</button>

  <button class="a-btn a-btn--disabled focus" title="Focused state" disabled>Focused state</button>
</div>

Destructive button

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn a-btn--warning" title="Default state">Default
  state</button>

  <button class="a-btn a-btn--warning hover" title="Hovered state">Hovered state</button>

  <button class="a-btn a-btn--warning focus" title="Focused state">Focused state</button>
</div>

Destructive action

When paired with a primary action, indicate the destructive action using a destructive action button link to the right of the primary button.

HTML code snippet

<div class="m-btn-group">
    <button class="a-btn">Action</button>
    <button class="a-btn a-btn--link a-btn--warning">Destructive action</button>
</div>

Full-width button (on x-small screens)

Reduce screen size to see this button in action.

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn a-btn--full-on-xs" title="Default state">Default
  state</button>

  <button class="a-btn a-btn--full-on-xs hover" title="Hovered state">Hovered state</button>

  <button class="a-btn a-btn--full-on-xs focus" title="Focused state">Focused state</button>

  <button class="a-btn a-btn--full-on-xs active" title="Active state">Active state</button>
</div>

Button with icon

An icon should appear after the text it represents. The only exception is the back button, in which the icon should appear before the button’s text. Each icon should be used exclusively and consistently for one action. Icons should never be underlined.

HTML code snippet

<div class="m-btn-group">
  <button class="a-btn">
      
      <span>Back</span>
  </button>

  <button class="a-btn">
      <span>Next</span>
      
  </button>

  <button class="a-btn a-btn--secondary">
      
      <span>Back</span>
  </button>

  <button class="a-btn a-btn--secondary">
      <span>Next</span>
      
  </button>

  <button class="a-btn a-btn--warning">
      
      <span>Back</span>
  </button>

  <button class="a-btn a-btn--warning">
      <span>Next</span>
      
  </button>

  <button class="a-btn a-btn--disabled">
      
      <span>Back</span>
  </button>

  <button class="a-btn" disabled>
      <span>Next</span>
      
  </button>

  <button class="a-btn" aria-label="Back">
      
  </button>

  <button class="a-btn" aria-label="Next">
      
  </button>
</div>

Button with animated icon

Use an animated icon in a button to reassure the user that the action they are attempting to perform is functioning as intended. The icon can be hidden when the action is complete by adding the a-btn--hide-icon class to the button.

HTML code snippet

<button class="a-btn">
    <span>Submit your complaint</span>
    
</button>

Button link

A link can be styled as a button, and vice versa.

Default state Hovered state Focused state Active state

Submit See Privacy Act statement

Download PDF External link

Printed button

When a consumerfinance.gov page is printed, buttons are presented as links. See Printed links on the Links page for specifications.

Use cases

Buttons signal actions. They should be used sparingly; each additional button on a page reduces the visual prominence of a call to action. In contrast, links should lead users to another page or further information.

Guidelines

  • Use generous white space to bring focus to a button and better make it appear actionable.
  • Write labels in sentence case.
  • Use verbs and an active voice.
  • Use clear, succinct, and informative language.
  • Limit the copy length to 22 characters.

Restrictions

Do

Do not

Do

Do not

Latest Updates

Page last edited:
Show all details
Edit page