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.

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.

Labels

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.

Normal

• Pacific background color
• White text

Hover/Focused

• Pacific 80% background color

Active

• Navy 80% background color

Disabled

• Gray 20% background color
• Gray text
• Cursor set to not-allowed

Large Primary button

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

• 18px Avenir Next Medium text in white
• 15px top and bottom padding
• 30px left and right padding

Button group

Compound action

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

Destructive action

• Red Orange type color

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