Buttons

Primary

The Primary button style should be used for the primary call to action of each page. It should not be used more than once on a page.

Primary With Icon

An icon should be used within a Primary button when it is deemed beneficial to the user to understand the intended action of the button. It should be placed 16px from either side. The label shall remain centered.

Secondary

The Secondary button is used for buttons on the page that are secondary actions to the main cta.

Secondary With Icon

The Secondary button is used for buttons on the page that are secondary actions to the main cta.

Tertiary

The Tertiary button is not used often, but is to be used when an action is either repeated often within a list (e.g., Edit) or to conserve space within either the top of content area or sidebar.

Tertiary With Icon

Tertiary button styling with icon.

Text Link

Text Link styling for actionable text.

Selection

A Selection button is used when a user must make a selection, or multiple selections, within one page and a visual cue is needed to be displayed on the page for that selection.

Selection

The selected state style for the Selection button.

Selection Alt

An alternative style for the Selection button. This button style is used when the background styling of the button could interfere with comprehending the graphic displayed within the button.

Selection Alt Selected

An alternative style for the Selection button. This button style is used when the background styling of the button could interfere with comprehending the graphic displayed within the button.

Primary Selected

The Primary Selected style is used when a selected state change is necessary to display for a Primary button.

Accordion

The Accordion style combines both the secondary button styling with the link styling. The entire area of the accordion row should be interactive, not just the button and text.

Accordion Selected

The styling for an accordion row after selection.