Buttons

v2.0.0-beta.3

This component defines the standard visual style for buttons.

Usage Guidelines

Every instance of a button should come from this component. See the sections below for information about when to each each type of button.

Button types
Button sizes
Disabled Buttons
Confirmation Buttons
Redlines
Changelog

Features

Single collection of all button styles
Primary and Default button types
Default and Large button sizes
Guaranteed compliance with Accessibility contrast requirements

Dependencies

Colors v2.0.0-beta.5

Typography v2.0.0-beta.5

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Button types

Buttons come in several different types. Each defines a normal, active/hover, and disabled state.

Primary indicates the main call to action and should only appear once per group of buttons.

Default is your basic button, it can appear multiple times in a given group.

CTA is your Call To Action button and should be used only in very specific instances such as Sign-In. It takes a higher priority over the Primary button type. It is the single most important action you can take on a page. This can only be used ONCE per page.

If a Default or Primary button increases in priority within the context of the same page, it can convert to a CTA button.

All three button types in their various states.

Button sizes

Buttons come in default and large sizes. Prefer the default size but feel free to use the large size where they would fit better with surrounding content. Both button sizes are meant to pair with equally sized inputs.

The two button sizes.

Disabled Buttons

Use a disabled button only if an action on the current screen can enable it (action possibility). A disabled button should only appear when contextually relevant. If the button is not needed for the task at hand, it should be hidden.

If a bank of 2 or more buttons is present but can only be enabled by direct action on the same screen, it can be hidden and only shown when enabled to give emphasis of new controls available to the user.

Examples of when to disable vs. hide buttons

Confirmation Buttons

In situations where the user should receive feedback that the action initiated by a button was successful use the Confirmation Button style which integrates feedback.

For simple binary confirmation feedback, this type of button is sufficient—an additional alert or message is unnecessary.