COMPONENTS

Button

Buttons allow a user to take an action.

button-intro.png
button-anatomy.png
  1. Call to Action
  2. Container
  3. Icon

There are four types of buttons – icon only, basic, leading icon and trailing icon.

button-variations-single.png

Buttons can have either bold or minimal emphasis. Both levels of emphasis offer action styles that help to further define the purpose of the button to the user through visual cues such as color.

button-emphasis.png

There are four core action types that have defined styles – primary, secondary, tertiary and destructive. Primary is used for any action that is considered the main action on a page. Secondary or tertiary should be used for all other actions on the page. Destructive is used for actions that are destructive and permanent including deletion or removal.

button-actions.png

Buttons can be built with a square or circle shape. The square shape maintains 2 pixel rounded corners.

button-shape.png

Button status helps to provide feedback to the user after clicking or tapping on a button. In a happy path, the user will progress from the loading status to the success status and then return to the enabled state. In an error scenario, the user will progress from the loading status to the error status and should be shown messaging to alert them as to what went wrong and how to move forward.

button-status.png

For each action style, there are five button states — enabled, hover, active, focus and disabled.

button-states.png

Buttons can be displayed in large, medium and small sizes.

button-sizes.png

By default, the width of a button should be defined by the length of the text. Alternatively, a button can be set to a custom fixed width in order to maintain a consistent look across a page design.

button-width.png
  • Important buttons should be immediately visible to the user without scrolling.
  • Reference the Writing guidelines when writing calls to action.
button guidance

DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.

buttons guidance

DON'T: Use multiple primary styled buttons when several buttons are adjacent to each other in the same container.