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.

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.

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.

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

Jinja code snippet

{% macro render(value) -%}

<div class="o-form-actions">
    <input class="a-btn a-btn__disabled form-actions_item"
          type="submit"
          disabled
          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, Mid dark red (#c3381c)

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

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

Static icon buttons

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 buttons

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

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

Edit page