Button: style

This page documents visual specifications such as colour, typography, structure, and size.

Colour

Primary button colour

Resting state

Element	Property	Colour reference	Colour token
Container	background colour	Action 01	$button-background-primary
	border colour	Action 01	$button-border-primary
Label	text colour	Action text 02	$button-label-primary
Icon	svg	Action text 02	$button-icon-primary

Primary button interactive state colour

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action 02	$button-background-primary-hover
		border colour	Action 02	$button-border-primary-hover
	Label	text colour	Action text 02	$button-label-primary-hover
	Icon	svg	Action text 02	$button-icon-primary-hover
Focus	Container	background colour	Action 02	$button-background-primary-focus
		border colour	Action 07	$button-border-primary-focus
	Label	text colour	Action text 02	$button-label-primary-focus
	Icon	svg	Action text 02	$button-icon-primary-focus
Active	Container	background colour	Action 03	$button-background-primary-active
		border colour	Action 03	$button-border-primary-active
	Label	text colour	Action text 02	$button-label-primary-active
	Icon	svg	Action text 02	$button-icon-primary-active

Secondary button colour

Resting state

Element	Property	Colour reference	Colour token
Container	background colour	Action 07	$button-background-secondary
	border colour	Action 01	$button-border-secondary
Label	text colour	Action text 01	$button-label-secondary
Icon	svg	Action text 01	$button-icon-secondary

Secondary button interactive state colour

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action 04	$button-background-secondary-hover
		border colour	Action 01	$button-border-secondary-hover
	Label	text colour	Action text 01	$button-label-secondary-hover
	Icon	svg	Action text 01	$button-icon-secondary-hover
Focus	Container	background colour	Action 04	$button-background-secondary-focus
		border colour	Action 07	$button-border-secondary-focus
	Label	text colour	Action text 01	$button-label-secondary-focus
	Icon	svg	Action text 01	$button-icon-secondary-focus
Active	Container	background colour	Action 01	$button-background-secondary-active
		border colour	Action 01	$button-border-secondary-active
	Label	text colour	Action text 02	$button-label-secondary-active
	Icon	svg	Action text 02	$button-icon-secondary-active

Ghost button colour

Resting state

Element	Property	Colour reference	Colour token
Container	background colour	Transparent	$button-background-ghost
	border colour	Transparent	$button-border-ghost
Label	text colour	Action text 01	$button-label-ghost
Icon	svg	Action text 01	$button-icon-ghost

Ghost button interactive state colour

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action 04	$button-background-ghost-hover
		border colour	Transparent	$button-border-ghost-hover
	Label	text colour	Action text 01	$button-label-ghost-hover
	Icon	svg	Action text 01	$button-icon-ghost-hover
Focus	Container	background colour	Action 07	$button-background-ghost-focus
		border colour	Transparent	$button-border-ghost-focus
	Label	text colour	Action text 01	$button-label-ghost-focus
	Icon	svg	Action text 01	$button-icon-ghost-focus
Active	Container	background colour	Action 01	$button-background-ghost-active
		border colour	Action 01	$button-border-ghost-active
	Label	text colour	Action text 02	$button-label-ghost-active
	Icon	svg	Action text 02	$button-icon-ghost-active

Danger button colour

Showing only colours that are different to the default for that button type.

Resting state

Element	Property	Colour reference	Colour token
Container	background colour	Action danger 01	$button-background-primary-danger
	border colour	Action danger 03	$button-border-primary-danger

Element	Property	Colour reference	Colour token
Container	border colour	Action danger 01	$button-border-secondary-danger
Label	text colour	Action text danger 01	$button-label-secondary-danger
Icon	svg	Action text danger 01	$button-icon-secondary-danger

Element	Property	Colour reference	Colour token
Label	text colour	Action text danger 01	$button-label-ghost-danger
Icon	svg	Action text danger 01	$button-icon-ghost-danger

Ghost button interactive state colour

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action danger 02	$button-background-primary-danger-hover
		border colour	Action danger 03	$button-border-primary-danger-hover
Focus	Container	background colour	Action danger 02	$button-background-primary-danger-focus
Active	Container	background colour	Action danger 03	$button-background-primary-danger-active
		border colour	Action danger 03	$button-border-primary-danger-active

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action danger 04	$button-background-secondary-danger-hover
		border colour	Action danger 01	$button-border-secondary-danger-hover
	Label	text colour	Action text danger 01	$button-label-secondary-danger-hover
	Icon	svg	Action text danger 01	$button-icon-secondary-danger-hover
Focus	Container	background colour	Action danger 04	$button-background-secondary-danger-focus
	Label	text colour	Action text danger 01	$button-label-secondary-danger-focus
	Icon	svg	Action text danger 01	$button-icon-secondary-danger-focus
Active	Container	background colour	Action danger 01	$button-background-secondary-danger-active
		border colour	Action danger 03	$button-border-secondary-danger-active

State	Element	Property	Colour reference	Colour token
Hover	Container	background colour	Action danger 04	$button-background-ghost-danger-hover
	Label	text colour	Action text danger 01	$button-label-ghost-danger-hover
	Icon	svg	Action text danger 01	$button-icon-ghost-danger-hover
Focus	Label	text colour	Action text danger 01	$button-label-ghost-danger-focus
	Icon	svg	Action text danger 01	$button-icon-ghost-danger-focus
Active	Container	background colour	Action danger 01	$button-background-ghost-danger-active
		border colour	Action danger 01	$button-border-ghost-danger-active

Disabled button state

In a disabled state, primary, secondary, and ghost buttons retain the same colours as their resting state but with 65% opacity. This ensures visual consistency while clearly indicating that the button is inactive. The reduced opacity maintains the button’s association with its intended action while preventing user interaction.

Typography

Button labels should be in sentence case, with only the first word and proper nouns capitalised.

Element	Size (px/rem)	Weight	Line height (px/rem)	Letter spacing	Token

Small button label	14 / 0.875	Regular – 400	20 / 1.25	0.25px	‐‐action-01
Medium button label	16 / 1	Regular – 400	24 / 1.5	0.16px	‐‐action-02
Large button label	16 / 1	Regular – 400	24 / 1.5	0.16px	‐‐action-02

Structure

Primary, secondary, and ghost buttons the same structural measurements for each button size (small, medium & large).

For a medium-sized button, the label should be placed within 16 pixels (1rem) of the button’s borders. For buttons with an icon, the spacing between the label and icon should be 8px (0.5rem), the icon also causes the button’s padding to decrease on the icon’s side allowing for better visual balance of the button.

Small-sized button

12 12 4 4 20

8 12 4 4 4

8 4 32 16

Button height: 32px
Text label / icon size: 0.875rem / 14px
Text label line height: 1.12 / 16px
Border radius: 0.375rem / 6px
Spacing: 0.25rem / 4px

Medium-sized button

16 16 4 4 24

12 16 4 4 8

8 4 40 16

Button height: 40px
Text label / icon size: 1rem / 16px
Text label line height: 1.5 / 24px
Border radius: 0.5rem / 8px
Spacing: 0.5rem / 8px

Large-sized button

20 20 4 4 24

16 20 4 4 8

Button height: 48px
Text label / icon size: 1rem / 16px
Text label line height: 1.5 / 24px
Border radius: 0.5rem / 8px
Spacing: 0.5rem / 8px

Button sets structure

The following specifications are built into the button set pattern and are design recommendations for optimal spacing between buttons.

In button sets, the primary button should be placed on the outer edge of the set, while secondary and ghost buttons are positioned inside.

By default the spacing between buttons in a button set is 8px / 0.5rem. When buttons are stacked the row spacing is also 8px / 0.5rem. Button sets containing icon-only buttons will have their spacing between buttons set to 4px / 0.25rem, however the row spacing remains 8px / 0.5rem.

8px

4px 4px

Button set margin

A button-set will also add a 8px / 0.5rem margin to the top to create additional space between itself and the elements above. If there are any additional unrelated elements placed under a button-set this will also create a 8px / 0.5rem margin on the bottom.

8px

Size

Buttons are available in three sizes: small, medium & large. For detailed use cases of each button size, refer to the Button Sizes section on the Usage tab.

Buttons have a minimum width of 64px / 4rem.

Size	Height (px/rem)

Small	32 / 2
Medium	40 / 2.5
Large	48 / 3

32px

40px

48px

Up next: code & specs

Continue to code & specs