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.

Source Code

Style View code

Primary and secondary buttons

Use primary buttons for actions that go to the next step. Use secondary buttons for actions that happen on the current page.

Generous white space lends focus and makes buttons more actionable. Avoid using multiple primary buttons on a single page; there can be multiple secondary buttons per page.

Primary buttons

Secondary buttons

Sign up

Labels

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.





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.



Animation

Use an animated icon in a button to reassure the user that the action they are attempting to perform is functioning as intended.

States

Primary button

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)
Sign up

Focused

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

Active

  • Background: Navy (#254b87)
Sign up


Secondary button

Default

  • Background: Gray (#5a5d61)
Sign up

Hover

  • Background: Dark Gray (#43484e)
Sign up

Focused

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

Active

  • Background: CFPB Black (#101820)
Sign up


Destructive button

Default

  • Background: Red (#d14124)
Sign up

Hover

  • Background: Dark Red (#b63014)
Sign up

Focused

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

Active

  • Background: Dark Gray (#43484e)
Sign up


Disabled button

Default/Hover/Active

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

Focused

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


Variations

Large primary button

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

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

Button group

Compound action

For multiple actions in a single button unit. Prone to error, avoid if possible.

Destructive action

  • Avenir Next Medium, 16px, Red (#d14124)

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