Button

Element	Property	Color token
Label	text-color	`$text-on-color`
Icon	svg	`$icon-on-color`
Container	background-color	`$button-primary`

State	Element	Property	Color token
Hover	Container	background-color	`$button-primary-hover`
Focus	Container	border	`$focus`
		inset	`$focus-inset`
Active	Container	background-color	`$button-primary-active`
Disabled	Label	text-color	`$text-on-color-disabled`
	Icon	svg	`$icon-on-color-disabled`
	Container	background-color	`$button-disabled`

Element	Property	Color token
Label	text-color	`$text-on-color`
Icon	svg	`$icon-on-color`
Container	background-color	`$button-secondary`

State	Element	Property	Color token
Hover	Container	background-color	`$button-secondary-hover`
Focus	Container	border	`$focus`
		inset	`$focus-inset`
Active	Container	background-color	`$button-secondary-active`
Disabled	Label	text-color	`$text-on-color-disabled`
	Icon	svg	`$icon-on-color-disabled`
	Container	background-color	`$button-disabled`

Secondary button interactive states color

Element	Property	Color token
Label	text-color	`$button-tertiary`
Icon	svg	`$button-tertiary`
Container	background-color	transparent
	border	`$button-tertiary`

State	Element	Property	Color token
Hover	Label	text-color	`$text-inverse`
	Icon	svg	`$icon-inverse`
	Container	background-color	`$button-tertiary-hover`
Focus	Container	background-color	`$button-tertiary`
		border	`$focus`
		inset	`$focus-inset`
Active	Label	text-color	`$text-inverse`
	Icon	svg	`$icon-inverse`
	Container	background-color	`$button-tertiary-active`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`
	Container	background-color	transparent
		border	`$button-disabled`

Tertiary button interactive states color

Element	Property	Color token
Label	text-color	`$link-primary`
Icon	svg	`$link-primary`
Container	background-color	transparent

Element	Property	Color token
Icon	svg	`$icon-primary`
Container	background-color	transparent

State	Element	Property	Color token
Hover	Label	text-color	`$link-primary-hover`
	Icon	svg	`$link-primary-hover`
	Container	background-color	`$background-hover`
Focus	Container	background-color	`$focus`
Active	Container	background-color	`$background-hover`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`

State	Element	Property	Color token
Hover	Container	background-color	`$background-hover`
Focus	Container	border	`$focus`
Active	Container	background-color	`$background-active`
Disabled	Icon	svg	`$icon-disabled`

Element	Property	Color token
Label	text-color	`$text-on-color`
Icon	svg	`$icon-on-color`
Container	background-color	`$button-danger-primary`

Danger primary button color

State	Element	Property	Color token
Hover	Container	background-color	`$button-danger-hover`
Focus	Container	border	`$focus`
		inset	`$focus-inset`
Active	Container	background-color	`$button-danger-active`
Disabled	Label	text-color	`$text-on-color-disabled`
	Icon	svg	`$icon-on-color-disabled`
	Container	background-color	`$button-disabled`

Danger primary button interactive states color

Danger primary button interactive state color

Element	Property	Color token
Label	text-color	`$button-danger-secondary`
Icon	svg	`$button-danger-secondary`
Container	border	`$button-danger-secondary`

Danger tertiary button color

State	Element	Property	Color token
Hover	Label	text-color	`$text-on-color`
	Icon	svg	`$icon-on-color`
	Container	background-color	`$button-danger-hover`
Focus		border	`$focus`
		inset	`$focus-inset`
Active	Label	text-color	`$text-on-color`
	Icon	svg	`$icon-on-color`
	Container	background-color	`$button-danger-active`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`
	Container	background-color	`$button-disabled`

Danger tertiary button interactive state color

Element	Property	Color token
Label	text-color	`$button-danger-secondary`
Icon	svg	`$button-danger-secondary`
Container	background-color	transparent

Danger ghost button color

State	Element	Property	Color token
Hover	Label	text-color	`$text-on-color`
	Icon	svg	`$icon-on-color`
	Container	background-color	`$button-danger-hover`
Focus		border	`$focus`
		inset	`$focus-inset`
Active	Label	text-color	`$text-on-color`
	Icon	svg	`$icon-on-color`
	Container	background-color	`$button-danger-active`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`
	Container	background-color	`$button-disabled`

Danger ghost button interactive state color

Button label should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Element	Font-size (px/rem)	Font-weight	Type token
Button label	14 / 0.875	Regular / 400	`$body-compact-01`
Button label (expressive)	16 / 1	Regular / 400	`$body-compact-02`

Primary, secondary, tertiary, danger primary and danger tertiary button follows the same structure measurements. A button cannot have label or any element within 16 pixels / 1 rem of its borders. For a button with an icon, the space between the button label and the icon must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with icons appear together.

Element	Property	px / rem	Spacing token
Button without icon	padding-left	16 / 1	`$spacing-05`
	padding-right	64 / 4	`$spacing-10`
Button with icon	padding-left, padding-right	16 / 1	`$spacing-05`
	spacing	32 / 2	`$spacing-07`
Icon only button	padding-left, padding-right	16 / 1	`$spacing-05`
Icon	svg	16 x 16	–
Icon: expressive	size	20 x 20	–
Focus	box-shadow: inset	1px	–

Structure measurements for a button | px / rem

Ghost and danger ghost button follow the same structure measurements.

Element	Property	px / rem	Spacing token
Ghost button without icon	padding-left, padding-right	16 / 1	`$spacing-05`
Ghost button with icon	spacing	8 / 0.5	`$spacing-03`
Ghost icon only button	padding-left, padding-right	16 / 1	`$spacing-05`

Structure measurements for ghost button | px / rem

The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.

For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside.

Element	Property	px / rem	Spacing token
Button groups	border (fluid)	1px	–
	spacing (fixed)	16px	`$spacing-05`
	margin-left, margin-right	0	–

Structure measurements for button groups | px / rem

There are seven button sizes: extra small, small, medium, large (productive), large (expressive), extra large, and 2XL. The large (expressive) button is used in editorial and digital marketing experiences. See Button sizes on the Guidelines tab for more information about specific use cases for each button size.

We do not recommend mixing different button sizes in #button-groups.

Variant	Size	Height (px / rem)
Button	Extra small	24 / 1.5
	Small	32 / 2
	Medium	40 / 2.5
	Large (productive)	48 / 3
	Large (expressive)	48 / 3
Full bleed button	Extra large	64 / 4
	2XL	80 / 5

Button sizes

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Color

Primary button color

Primary button interactive state color

Secondary button color

Secondary button interactive state color

Tertiary button color

Tertiary button interactive state color

Ghost button color

Ghost button color

Ghost icon only button color

Ghost button interactive state color

Ghost icon only button interactive state color

Danger primary button color

Danger primary button interactive state color

Danger tertiary button color

Danger tertiary button interactive state color

Danger ghost button color

Danger ghost button interactive state color

Typography

Structure

Button structure

Ghost button structure

Button groups structure

Size

Feedback