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 class="a-btn__icon
a-btn__icon--on-left">
</span>
Back
</button>
<button class="a-btn">
Next
<span class="a-btn__icon
a-btn__icon--on-right">
</span>
</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.
HTML code snippet
<button class="a-btn">
Submit your complaint
<span class="a-btn__icon
a-btn__icon--on-right"></span>
</button>Button link
A link can be styled as a button, and vice versa.
HTML code snippet
<div class="m-btn-group">
<a class="a-btn">Submit</a>
<a class="a-btn a-btn--link a-btn--secondary" href="#">
See Privacy Act statement
</a>
</div>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