Buttons

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.

Types

Primary buttons

Use primary buttons for actions that go to the next step. Avoid using multiple primary buttons on a single page; there can be multiple secondary buttons per page.

The Primary button is an atom in our atomic design standards. You can apply the a-btn class to a link, button and submit input field to receive the atomic button styles.

HTML code snippet

<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>

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Implementation details

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

Specs

Default

  • Avenir Next Medium, 16px, (#ffffff)
  • Background: Pacific (#0072ce)
  • Top and bottom padding: 10px
  • Left and right padding: 15px
  • Border radius: 4px

Hover

  • Background: Dark Pacific (#0050b4)

Focused

  • Background: Dark Pacific (#0050b4)
  • Outline: Dotted 1px, Pacific (#0072ce)
  • Outline offset: 1px

Active

  • Background: Navy (#254b87)

Secondary buttons

Use secondary buttons for actions that happen on the current page.

HTML code snippet

<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>

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__secondary form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Specs

Default

  • Background: Gray (#5a5d61)

Hover

  • Background: Dark Gray (#43484e)

Focused

  • Background: Dark Gray (#43484e)
  • Outline: Dotted 1px, Gray (#5a5d61)
  • Outline offset: 1px

Active

  • Background: CFPB Black (#101820)

Disabled buttons

HTML code snippet

<button class="a-btn a-btn__disabled" title="Default state">Default state</button>

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

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

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__disabled form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Specs

Default/Hover/Active

  • Avenir Next Medium, 16px, Gray (#5a5d61)
  • Background: Gray 20 (#d2d3d5)
  • Cursor set to not-allowed

Focused

  • Outline: Dotted 1px, Gray 20 (#d2d3d5)
  • Outline offset: 1px

Destructive buttons

HTML code snippet

<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>

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__warning form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Specs

Default

  • Background: Red (#d14124)

Hover

  • Background: Dark Red (#b63014)

Focused

  • Background: Dark Red (#b63014)
  • Outline: Dotted 1px, Red (#d14124)
  • Outline offset: 1px

Active

  • Background: Dark Gray (#43484e)

Destructive actions

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>

Specs

  • Destructive action link: Avenir Next Medium, 16px, Red (#d14124

Sizes

Super buttons

At the designer’s discretion, use the super button on consumer-facing products for an important call to action.

HTML code snippet

<button class="a-btn a-btn__super" title="Default state">Default state</button>

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

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

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

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__super form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Specs

  • Avenir Next Medium, 18px, White (#ffffff)
  • Top and bottom padding: 15px
  • Left and right padding: 30px

Full-width buttons on x-small screens

Reduce screen size to see these in action.

HTML code snippet

<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>

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__full-on-xs form-actions_item"
          type="submit"
          value="{{ value.button_text }}">
</div>

{%- endmacro %}

Groups

Default button group

HTML code snippet

<div class="m-btn-group">
    <button class="a-btn">Yes</button>
    <button class="a-btn">No</button>
    <button class="a-btn">Maybe So</button>
</div>

Buttons with icons

Use icons consistently. Each icon should be used exclusively for one action. Icons appear to the left of the button text. Buttons that have “forward” actions have icons to the right of the text, and those with “back” actions have icons to the left.

Icon buttons

Example below of buttons with icon on left (“back” button) and icon on right (“next” button)

HTML code snippet

<button class="a-btn">
    <span class="a-btn_icon
                 a-btn_icon__on-left">
       {% include icons/left.svg %}
    </span>
    Back
</button>

<button class="a-btn">
    Next
    <span class="a-btn_icon
                 a-btn_icon__on-right">
        {% include icons/right.svg %}
    </span>
</button>

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">{% include icons/updating.svg %}</span>
</button>
-->

Use cases

Generous white space lends focus and makes buttons more actionable.

Content guidelines

Labels should be written in sentence case. Use verbs and an active voice. Language should be clear, succinct, and informative. Limit the copy length to 22 characters.

Use icons consistently. Each icon should be used exclusively for one action. Icons appear to the left of the button text. Buttons that have “forward” actions have icons to the right of the text, and those with “back” actions have icons to the left.

Restrictions

Do

Do not

Do

Do not

  • related items
Edit this page
Add new page