Button

Buttons allow the user to move through a task by triggering single actions. The container gives the button visual impact and the text label communicates a clear purpose. Optionally, all button variants may include an icon to the left of the label.

Variants

Primary Button

Used for the primary actions in a layout, these buttons drive a task forward. One primary button is used on a given pattern but multiple primary buttons may be used on a page that offers the user different interactions.

Secondary Button

Used for any alternate actions in a layout, this button lets the user know what they can do instead of moving forward in a task. Multiple secondary buttons can appear in a single screen.

Small Button

Primary and secondary buttons may use an equivalent small button when there are space constraints to consider or when the action should be given less visual prominence. On mobile, small buttons should always be used instead of primary and secondary buttons.

States

Primary, secondary and small buttons each have a default, hover/active and focus state. In addition, a disabled state is available.

Disabled Button

Used for an unavailable action, this state signals that the user must complete another action first. Only use when a triggering action, such as choosing between two options shown on screen, must be completed before the button’s action becomes available.

Design Environment

The primary button should have prominence in a layout, either above or to the right of all other buttons.

Primary and secondary buttons have a minimum width of 100px. If this width cannot be accommodated, use small buttons instead. In mobile environments, single buttons, including small buttons, will automatically fill the full width of the screen. In tablet and desktop environments, buttons will fill 100% of their containing element.

Inline Placement

Buttons should be placed inline only when there is a clear relationship between the primary and secondary actions being offered. No more than two individual primary or secondary buttons should appear side-by-side in a single layout.

Microcopy

Use strong verbs and specific language in text labels to clearly signal what will happen next.

Text should be in title case with no end punctuation. Ideal length is between 5 and 25 characters.

Use a clear call to action.

Use title case.

Keep text as short while still being clear.

Don't

Use generic language.

Use sentence case or end punctation.

Try to include too much information.