Tabs

* Denotes a contextual color token that will change values based on the layer it is placed on.

Type	Element	Property	Color token
Unselected	Tab	background-color	transparent
		border-bottom	`$border-subtle` *
	Label	text-color	`$text-secondary`
	Icon	svg	`$icon-secondary`
Selected	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
	Tab	border-bottom	`$border-interactive`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of selected and unselected line tabs.

State	Element	Property	Color token
Hover	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
	Tab	border-bottom	`$border-strong`
Focus	Tab: unselected	border	`$focus`
	Tab: selected	border	`$focus`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`
	Tab	background-color	transparent
		border-bottom	`$border-disabled`

Examples of hover, unselected focus, selected focus, and disabled states for line tabs.

State	Element	Property	Color token
Enabled	Icon	svg	`$icon-primary`
	Button	linear-gradient	`$background` to 100% transparent, 8px
		background-color	`$background`
Hover	Button	background-color	`$background-hover`
Active	Button	background-color	`$background-active`

Examples of enabled, hover, and active states for scrollable line tabs.

Type	Element	Property	Color token
Unselected	Tab	background-color	transparent
		border-bottom	`$border-subtle` *
	Label	text-color	`$text-secondary`
	Icon	svg	`$icon-secondary`
Selected	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
	Tab	border-bottom	`$border-interactive`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of selected and unselected dismissible line tabs.

State	Element	Property	Color token
Hover	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
		background-color	`$background-hover`
	Tab	border-bottom	`$border-strong` *
Focus	Tab: unselected	border	`$focus`
	Tab: selected	border	`$focus`
Disabled	Label	text-color	`$text-disabled`
	Icon	svg	`$icon-disabled`
	Tab	background-color	transparent
		border-bottom	`$border-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible line tabs.

Examples of selected close hover and selected focus states for dismissible contained tabs.

Examples of selected close hover and selected focus states for dismissible line tabs.

* Denotes a contextual color token that will change values based on the layer it is placed on.

Type	Element	Property	Color token
Unselected	Tab	background-color	`$layer-accent` *
		border-right	`$border-strong` *
	Label	text-color	`$text-secondary`
	Secondary label	text-color	`$text-secondary`
	Icon	svg	`$icon-secondary`
Selected	Tab	background-color	`$layer` *
		border-top	`$border-interactive`
	Label	text-color	`$text-primary`
	Secondary label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected contained tabs.

State	Element	Property	Color token
Hover	Tab	background-color	`$layer-accent-hover` *
	Label	text-color	`$text-primary`
	Secondary label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
Focus	Tab	border	`$focus`
Disabled	Label	text-color	`$text-on-color-disabled`
	Secondary label	text-color	`$text-on-color-disabled`
	Icon	svg	`$icon-on-color-disabled`
	Tab	background-color	`$button-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of hover, unselected focus, selected focus, and disabled states for contained tabs.

State	Element	Property	Color token
Enabled	Icon	svg	`$icon-secondary`
	Button	background-color	`$layer-accent` *
Hover	Button	background-color	`$layer-accent-hover` *
	Icon	svg	`$icon-primary`
Active	Button	background-color	`$layer-accent-active` *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of enabled, hover, and active states for contained scrollable tabs.

Type	Element	Property	Color token
Unselected	Tab	background-color	`$layer-accent` *
		border-right	`$border-strong` *
	Label	text-color	`$text-secondary`
	Icon	svg	`$icon-secondary`
	Dismissible icon	svg	`$icon-secondary`
Selected	Tab	background-color	`$layer` *
		border-top	`$border-interactive`
	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
	Dismissible icon	svg	`$icon-primary`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected dismissible contained tabs.

State	Element	Property	Color token
Hover	Tab	background-color	`$layer-accent-hover` *
	Label	text-color	`$text-primary`
	Icon	svg	`$icon-primary`
	Dismissible icon	svg	`$icon-primary`
	Dismissible icon: selected	background-color	`$layer-hover` *
	Dismissible icon: unselected	background-color	`$layer-accent-hover` *
Focus	Tab	border	`$focus`
Disabled	Label	text-color	`$text-on-color-disabled`
	Icon	svg	`$icon-on-color-disabled`
	Tab	background-color	`$button-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible contained tabs.

Examples of selected close hover and selected focus states for dismissible contained tabs.

Type	Element	Property	Color token
Unselected	Tab	background-color	`$layer` *
		border-bottom, border-right, border-left	`$border-subtle` *
	Label	text-color	`$text-secondary`
	Extended background	background-color	`$layer` *
		border-right	`$border-subtle` *
Selected	Tab	background-color	`$layer` *
		border-bottom	`$border-subtle` *
		border-left	`$border-interactive` *
	Label	text-color	`$text-primary`
tab panel	background	background-color	`$layer` *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected vertical tabs.

State	Element	Property	Color token
Hover	Label	text-color	`$text-primary`
	Tab	background-color	`$layer-hover` *
Focus	Tab: unselected	border	`$focus`
	Label: unselected	text-color	`$text-secondary`
	Tab: selected	border	`$focus`
	Label: selected	text-color	`$text-primary`
Disabled	Label	text-color	`$text-on-color-disabled`

Examples of hover, unselected focus, selected focus, and disabled states for vertical tabs.

Tab labels should be set in sentence case, and should not exceed three words.

Element	Font-size (px/rem)	Font-weight	Type token
Label: unselected	14 / 0.875	Regular / 400	`$body-compact-01`
Label: selected	14 / 0.875	SemiBold / 600	`$heading-compact-01`
Secondary label	12 / 0.75	Regular / 400	`$label-01`

Element	Property	px / rem	Spacing token
Tab	height	40 / 2.5	–
	border-bottom	2px	–
	width	auto-width	–
	margin-left	1px	–
Label	padding-left, padding-right	16 / 1	`$spacing-05`
	padding-top, padding-bottom	8 / 0.5	`$spacing-03`
Icon	padding-right	16 / 1	`$spacing-05`
	padding-left	8 / 0.5	`$spacing-03`
	svg	16 x 16	–
Scrollable icon	svg	16 x 16	–

Structure and spacing measurements for line tabs | px / rem

Element	Property	px / rem	Spacing token
Tab (md)	height, width	40 / 2.5	–
	svg	16 x 16	–
Tab (lg)	height, width	48 / 3	–
	svg	20 x 20	–

Structure and spacing measurements for icon-only line tabs | px / rem

Element	Property	px / rem	Spacing token
Tab	height	40 / 2.5	–
	border-bottom	2px	–
	width	auto-width	–
	margin-left	1px	–
Label	padding-left, padding-right	16 / 1	`$spacing-05`
	padding-top, padding-bottom	8 / 0.5	`$spacing-03`
Dismissible icon	padding-right	16 / 1	`$spacing-05`
	padding-left	8 / 0.5	`$spacing-03`
	svg	16 x 16	–
Icon	padding-right	8 / 0.5	`$spacing-03`
	padding-left	16 / 1	`$spacing-05`
	svg	16 x 16	–

Structure and spacing measurements for dismissible line tabs without icons (top) and with icons (bottom) | px / rem

Element	Property	px / rem	Spacing token
Tab	height	40 / 2.5	–
	border-top	2px	–
	width	auto-width, grid	–
Label	padding-left, padding-right	16 / 1	`$spacing-05`
Icon	padding-right	16 / 1	`$spacing-05`
	padding-left	16 / 1	`$spacing-05`
	svg	16 x 16	–
Tab	border-right	1px	–
Scrollable icon	svg	16 x 16	–
Scrollable button	border-right, border-left	1px	–

Structure and spacing measurements for contained tabs | px / rem

Element	Property	px / rem	Spacing token
Tab (lg)	height, width	48 / 3	–
	svg	20 x 20	–

Structure and spacing measurements for icon-only contained tabs | px / rem

Element	Property	px / rem	Spacing token
Tab	height	40 / 2.5	–
	border-top	2px	–
	width	auto-width, grid	–
Label	padding-left, padding-right	16 / 1	`$spacing-05`
Dismissible icon	padding-right	16 / 1	`$spacing-05`
	padding-left	8 / .5	`$spacing-03`
	svg	16 x 16	–
Icon	padding-right	8 / .5	`$spacing-03`
	padding-left	16 / 1	`$spacing-05`
	svg	16 x 16	–
Tab	border-right	1px	–

Structure and spacing measurements for dismissible contained tabs without icons (top) and with icons (bottom) | px / rem

Element	Property	px / rem	Spacing token
Tab	height	64 / 4	–
	border-left	3 px	–
Tab: unselected	border-bottom, border-right	1 px	–
Tab: selected	border-bottom	1 px	–
Label	padding-left, padding-right	16 / 1	`$spacing-05`
Extended background	border-right	1 px	–

Structure and spacing measurements for vertical tabs without overflow (left) and with overflow (right) | px / rem

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

Color

Line tab color

Line tab interactive state color

Line tab scrollable states

Dismissible line tab color

Dismissible line tab interactive state

Contained tab color

Contained tab interactive state color

Contained tab scrollable states

Dismissible contained tab color

Dismissible contained tab interactive state color

Vertical tab color

Vertical tab interactive state color

Typography

Structure

Line tab structure

Line tab icon-only modifier

Dismissible line tab structure

Contained tab structure

Contained tab icon-only modifier

Dismissible contained tab structure

Vertical tab structure

Feedback