Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.

Usage

Buttons should be clear and predictable - users should be able to anticipate what will happen when they click a button.

Types

Standard

Text only

Outline

Transactional

Dimensions

Buttons come in 3 fixed heights, a minimum width and a variable maximum width. Although there is no defined maximum width, the button width should be visually consistent with other elements on the page.

Sizes

24px

36px

44px

Spacing

24px

36px

44px

Hierarchy

Buttons have 3 levels of hierarchy emphasis: high, medium and low. A button’s level of emphasis helps determine its appearance, typography, and placement.

Button Type	Heirarchy	Purpose
Standard	High Emphasis	Standard buttons are used for principle call to action on the page. These buttons have more emphasis, as they have a color fill.
Transactional	High Emphasis	Transactional buttons have the most emphasis on the page and are used for ticket purchasing and other important transactions.
Text Only	Low Emphasis	Text buttons are typically used for less important actions.
Outline	Medium Emphasis	Outlined buttons are used for secondary actions on each page. They more emphasis than text buttons due to the stroke.

Text Label

Button labels are sentence case and are as short as possible, while clearly explaining what happens when the button is activated. It should always lead with a strong verb that encourages action. To provide enough context to users use the {verb} + {noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.

In order to increase legibility, in particular for localization purposes, use title case for buttons.

Do not use uppercase.

Lead with strong verbs.

Avoid nouns by themselves.

Pairings

Multiple button types can be combined to express different levels of emphasis and establish a clear primary call to action.

Indicate an important action by placing it in a Standard button next to a Text Only button (low emphasis).

Avoid pairing 2 high emphasis buttons or 2 buttons with the same emphasis. In most cases, one button has greater priority than others.

You can place an Outlined button (medium emphasis) next to a Standard button (high emphasis).

Always have a clear hierarchy. You can place a Text Only button next to an Outlined button (medium emphasis) and a Standard button (high emphasis).

Placement

Try placing buttons in the bottom right corner of pages, containers, modals, tool tips and other elements.

Place buttons on the right side of the page or container.

Avoid placing buttons on the left side of the page or container.

Helpful Links

Portfolio

Partners