Buttons
Buttons are interactive elements that signal actions. They should be used sparingly as 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.
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
<button class="a-btn" title="Primary">Primary</button>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
<button class="a-btn a-btn--secondary" title="Secondary">Secondary</button>Disabled button
HTML code snippet
<button class="a-btn a-btn--disabled" title="Disabled" disabled>Disabled</button>Destructive button
Although a destructive action can be styled as a button, we recommend using the destructive link style for consistency across cf.gov products.
HTML code snippet
<button class="a-btn a-btn--warning" title="Destructive">Destructive</button>Button with icon
An icon should appear after the text it represents. The only exception is the back button, where the icon appears before the button’s text. Each icon should be used exclusively and consistently for one action.
HTML code snippet
<div class="m-btn-group">
<button class="a-btn a-btn--secondary">
<span>Go back</span>
</button>
<button class="a-btn a-btn--secondary">
<span>Continue</span>
</button>
</div>
<br>
<button class="a-btn">
<span>Upload file</span>
</button>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 group
A button group is an element that combines multiple buttons into a single unit, often used to represent related actions or options. The m-btn-group class wrapped around a group of buttons will properly space the buttons across screen sizes.
HTML code snippet
<div class="m-btn-group">
<button class="a-btn a-btn--secondary">
<span>Go back</span>
</button>
<button class="a-btn a-btn">
<span>Continue</span>
</button>
</div>
<br>
<div class="m-btn-group">
<a class="a-btn" href="#">Submit</a>
<a class="a-btn a-btn--link a-btn--warning" href="#">
Clear form
</a>
</div>Full-width button (on x-small screens)
Reduce screen size to see this button in action.
HTML code snippet
<button class="a-btn a-btn--full-on-xs" title="Default state">Resize to mobile to see effect</button>Button link
A link can be styled as a button, and a button can be styled as a link. Whenever possible, use buttons for actions and links for navigation.
HTML code snippet
<div class="m-btn-group">
<a class="a-btn">
<span>Link styled as a button</span>
</a>
<button class="a-btn a-btn--link" href="#">
<span>Button styled as a link</span>
</button>
</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