Button

Buttons communicate actions that users can take, containing a call-to-action.

Primary

Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a modal).

Not every screen requires a primary button.

Storybook failed to load. Please connect to the VPN to access.

Secondary

Use the secondary button with a primary button for, as the name indicates, secondary actions, such as “Cancel".

Storybook failed to load. Please connect to the VPN to access.

Use a link button to navigate to another page. These should open in the same window unless information may be lost (for example, when someone is filling out a form), or when the destination is an external site (for example, a knowledge base article).

Not displaying?See common problemsShow add-ons

Transparent

Use a transparent button in actions like 'profile editing'. These buttons are typically used for less-pronounced actions.

Storybook failed to load. Please connect to the VPN to access.