Use buttons to help the user carry out important actions.

Types of buttons

There are four types of buttons: (1) primary-default, (2) secondary, (3) tertiary, and (4) icon-only. If there are multiple instances of the same button type (primary, secondary, tertiary) make sure to use clear and distinct labelling i.e. "save inspection data" instead of just "save".

Primary-default

A solid system button that is the main call-to-action (CTA) on the page. Primary buttons use the primary brand colour of the application that meet WCAG colour/contrast requirements. This button should include an icon as well as text as best practice, however it is not required in all situations. E.g. buttons like ‘update', 'cancel', 'submit' wouldn’t have icons, whereas 'edit', 'save', 'delete', 'print' should. Primary buttons feature a default, hover, and focused state (use the default browser focus attribute). Avoid using disabled buttons - use error validation instead.

Primary buttons follow the F pattern and should appear at the bottom-left of the page/content. There is only one primary button per button group. When positioned with a secondary button, the primary button appears on the left. On smaller devices (screen size of 320px), primary buttons become block-level elements and primary button appears on top. Avoid using multiple primary buttons on one page unless the page has equally important calls to action.

Secondary

Secondary buttons are used for alternative, less important actions such as "previous/next" buttons or sub actions that are nested within the main operation. Secondary buttons may be used more than once per button group. Secondary buttons use a more muted colour than primary buttons to deemphasize them. Secondary buttons need default, hover, and focused states.

When positioned with a primary button, the secondary button appears on the right. On smaller devices, secondary buttons become block-level elements and appear below the primary button.

Be cautious when using multiple secondary buttons so the user is not confused about what they should do next. Instead, consider breaking up the content so that it doesn’t need multiple secondary buttons or use spacing/grouping to make it clearer for the user.

Tertiary

Tertiary buttons are used for reduced-importance actions (such as "Edit", "Cancel", "Delete"). Tertiary buttons may be used more than once per button group and more than one tertiary button can be used on a single page. Tertiary buttons are styled like a hyperlink but must be labelled as a button. Tertiary buttons need default, hover, and focused states.

Icon-only

Icon-only buttons must only be used for globally understood icons (see table below); must use [aria-label]; must have hover tooltip indicating the name of the button so when the icon in hover and/or focus state, the user knows that the icon will do.

Minimum target area (clickable area) for icons is 48px by 48px with 12px of padding left/right and top/bottom. Icon itself should be approximately 24px by 24px.

Technical specifications

• All button text should be written in sentence case

• Width of the button (minimum 160px) should be the size of the text label with additional padding:

  • 24px internal padding on right and left sides of button text

  • 16px internal padding on the top and bottom of button text

• Use 32px of horizontal spacing between buttons for desktop

• Use 24px of vertical spacing between block-level buttons for mobile

• Use a max of 25 characters with spaces