Material Design 3 "Tab" tokens: All tokens

Preview

Primary

Files content

Secondary

Files content

Browse tokens

Tabs - Primary navigation

Enabled

Container

Container tokens
Token	Value
Primary navigation tab container color`md.comp.primary-navigation-tab.container.color`	#FEF7FF `md.comp.primary-navigation-tab.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Primary navigation tab container elevation`md.comp.primary-navigation-tab.container.elevation`	0dp `md.comp.primary-navigation-tab.container.elevation` `md.sys.elevation.level0`
Primary navigation tab container height`md.comp.primary-navigation-tab.container.height`	48dp `md.comp.primary-navigation-tab.container.height`
Primary navigation tab container shape`md.comp.primary-navigation-tab.container.shape`	0dp `md.comp.primary-navigation-tab.container.shape` `md.sys.shape.corner.none`
Primary navigation tab with icon and label text container height`md.comp.primary-navigation-tab.with-icon-and-label-text.container.height`	64dp `md.comp.primary-navigation-tab.with-icon-and-label-text.container.height`

Label text

Label text tokens
Token	Value
Primary navigation tab with label text active color`md.comp.primary-navigation-tab.with-label-text.active.label-text.color`	#6750A4 `md.comp.primary-navigation-tab.with-label-text.active.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with label text inactive color`md.comp.primary-navigation-tab.with-label-text.inactive.label-text.color`	#49454F `md.comp.primary-navigation-tab.with-label-text.inactive.label-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Primary navigation tab with label text font`md.comp.primary-navigation-tab.with-label-text.label-text.font`	Roboto `md.comp.primary-navigation-tab.with-label-text.label-text.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain`
Primary navigation tab with label text line height`md.comp.primary-navigation-tab.with-label-text.label-text.line-height`	20pt `md.comp.primary-navigation-tab.with-label-text.label-text.line-height` `md.sys.typescale.title-small.line-height`
Primary navigation tab with label text size`md.comp.primary-navigation-tab.with-label-text.label-text.size`	14pt `md.comp.primary-navigation-tab.with-label-text.label-text.size` `md.sys.typescale.title-small.size`
Primary navigation tab with label text tracking`md.comp.primary-navigation-tab.with-label-text.label-text.tracking`	0.1pt `md.comp.primary-navigation-tab.with-label-text.label-text.tracking` `md.sys.typescale.title-small.tracking`
Label text type style`md.comp.primary-navigation-tab.with-label-text.label-text.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.primary-navigation-tab.with-label-text.label-text.type` `md.comp.primary-navigation-tab.with-label-text.label-text.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain` `md.comp.primary-navigation-tab.with-label-text.label-text.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium` `md.comp.primary-navigation-tab.with-label-text.label-text.size` `md.sys.typescale.title-small.size` `md.comp.primary-navigation-tab.with-label-text.label-text.line-height` `md.sys.typescale.title-small.line-height` `md.comp.primary-navigation-tab.with-label-text.label-text.tracking` `md.sys.typescale.title-small.tracking`
Primary navigation tab with label text weight`md.comp.primary-navigation-tab.with-label-text.label-text.weight`	500 `md.comp.primary-navigation-tab.with-label-text.label-text.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium`

Icon

Icon tokens
Token	Value
Primary navigation tab with icon active color`md.comp.primary-navigation-tab.with-icon.active.icon.color`	#6750A4 `md.comp.primary-navigation-tab.with-icon.active.icon.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with icon size`md.comp.primary-navigation-tab.with-icon.icon.size`	24dp `md.comp.primary-navigation-tab.with-icon.icon.size`
Primary navigation tab with icon inactive color`md.comp.primary-navigation-tab.with-icon.inactive.icon.color`	#49454F `md.comp.primary-navigation-tab.with-icon.inactive.icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`

Divider

Divider tokens
Token	Value
Primary navigation tab divider color`md.comp.primary-navigation-tab.divider.color`	#E7E0EC `md.comp.primary-navigation-tab.divider.color` `md.sys.color.surface-variant` `md.ref.palette.neutral-variant90`
Primary navigation tab divider height`md.comp.primary-navigation-tab.divider.height`	1dp `md.comp.primary-navigation-tab.divider.height`

Active indicator

Active indicator tokens
Token	Value
Primary navigation tab active indicator color`md.comp.primary-navigation-tab.active-indicator.color`	#6750A4 `md.comp.primary-navigation-tab.active-indicator.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab active indicator height`md.comp.primary-navigation-tab.active-indicator.height`	3dp `md.comp.primary-navigation-tab.active-indicator.height`
Primary navigation tab active indicator shape`md.comp.primary-navigation-tab.active-indicator.shape`	Default: 3dp · Bottom-right: 0dp · Bottom-left: 0dp `md.comp.primary-navigation-tab.active-indicator.shape`

Hovered

Label text

Label text tokens
Token	Value
Primary navigation tab with label text active hover color`md.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color`	#6750A4 `md.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with label text inactive hover color`md.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color`	#1D1B20 `md.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Primary navigation tab active hover state layer color`md.comp.primary-navigation-tab.active.hover.state-layer.color`	#6750A4 `md.comp.primary-navigation-tab.active.hover.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab active hover state layer opacity`md.comp.primary-navigation-tab.active.hover.state-layer.opacity`	8% `md.comp.primary-navigation-tab.active.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`
Primary navigation tab inactive hover state layer color`md.comp.primary-navigation-tab.inactive.hover.state-layer.color`	#1D1B20 `md.comp.primary-navigation-tab.inactive.hover.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Primary navigation tab inactive hover state layer opacity`md.comp.primary-navigation-tab.inactive.hover.state-layer.opacity`	8% `md.comp.primary-navigation-tab.inactive.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`

Icon

Icon tokens
Token	Value
Primary navigation tab with icon active hover icon color`md.comp.primary-navigation-tab.with-icon.active.hover.icon.color`	#6750A4 `md.comp.primary-navigation-tab.with-icon.active.hover.icon.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with icon inactive hover icon color`md.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color`	#1D1B20 `md.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

Focused

Focus indicator

Focus indicator tokens
Token	Value
Primary navigation tab focus indicator color`md.comp.primary-navigation-tab.focus.indicator.color`	#625B71 `md.comp.primary-navigation-tab.focus.indicator.color` `md.sys.color.secondary` `md.ref.palette.secondary40`
Primary navigation tab focus indicator offset`md.comp.primary-navigation-tab.focus.indicator.outline.offset`	-3dp `md.comp.primary-navigation-tab.focus.indicator.outline.offset` `md.sys.state.focus-indicator.inner-offset`
Primary navigation tab focus indicator thickness`md.comp.primary-navigation-tab.focus.indicator.thickness`	3dp `md.comp.primary-navigation-tab.focus.indicator.thickness` `md.sys.state.focus-indicator.thickness`

Label text

Label text tokens
Token	Value
Primary navigation tab with label text active focus color`md.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color`	#6750A4 `md.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with label text inactive focus color`md.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color`	#1D1B20 `md.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Primary navigation tab active focus state layer color`md.comp.primary-navigation-tab.active.focus.state-layer.color`	#6750A4 `md.comp.primary-navigation-tab.active.focus.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab active focus state layer opacity`md.comp.primary-navigation-tab.active.focus.state-layer.opacity`	10% `md.comp.primary-navigation-tab.active.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`
Primary navigation tab inactive focus state layer color`md.comp.primary-navigation-tab.inactive.focus.state-layer.color`	#1D1B20 `md.comp.primary-navigation-tab.inactive.focus.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Primary navigation tab inactive focus state layer opacity`md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity`	10% `md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`

Icon

Icon tokens
Token	Value
Primary navigation tab with icon active focus color`md.comp.primary-navigation-tab.with-icon.active.focus.icon.color`	#6750A4 `md.comp.primary-navigation-tab.with-icon.active.focus.icon.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with icon inactive focus color`md.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color`	#1D1B20 `md.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

Pressed (ripple)

Label text

Label text tokens
Token	Value
Primary navigation tab with label text active pressed color`md.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color`	#6750A4 `md.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with label text inactive pressed color`md.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color`	#1D1B20 `md.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Primary navigation tab active pressed state layer color`md.comp.primary-navigation-tab.active.pressed.state-layer.color`	#6750A4 `md.comp.primary-navigation-tab.active.pressed.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab active pressed state layer opacity`md.comp.primary-navigation-tab.active.pressed.state-layer.opacity`	10% `md.comp.primary-navigation-tab.active.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`
Primary navigation tab inactive pressed state layer color`md.comp.primary-navigation-tab.inactive.pressed.state-layer.color`	#6750A4 `md.comp.primary-navigation-tab.inactive.pressed.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab inactive pressed state layer opacity`md.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity`	10% `md.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`

Icon

Icon tokens
Token	Value
Primary navigation tab with icon active pressed color`md.comp.primary-navigation-tab.with-icon.active.pressed.icon.color`	#6750A4 `md.comp.primary-navigation-tab.with-icon.active.pressed.icon.color` `md.sys.color.primary` `md.ref.palette.primary40`
Primary navigation tab with icon inactive pressed color`md.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color`	#1D1B20 `md.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

Tabs - Secondary navigation

Enabled

Container

Container tokens
Token	Value
Secondary navigation tab container color`md.comp.secondary-navigation-tab.container.color`	#FEF7FF `md.comp.secondary-navigation-tab.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Secondary navigation tab container elevation`md.comp.secondary-navigation-tab.container.elevation`	0dp `md.comp.secondary-navigation-tab.container.elevation` `md.sys.elevation.level0`
Secondary navigation tab container height`md.comp.secondary-navigation-tab.container.height`	48dp `md.comp.secondary-navigation-tab.container.height`
Secondary navigation tab container shadow color`md.comp.secondary-navigation-tab.container.shadow-color`	#000000 `md.comp.secondary-navigation-tab.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`
Secondary navigation tab container shape`md.comp.secondary-navigation-tab.container.shape`	0dp `md.comp.secondary-navigation-tab.container.shape` `md.sys.shape.corner.none`

Label text

Label text tokens
Token	Value
Secondary navigation tab active label text color`md.comp.secondary-navigation-tab.active.label-text.color`	#1D1B20 `md.comp.secondary-navigation-tab.active.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Secondary navigation tab inactive label text color`md.comp.secondary-navigation-tab.inactive.label-text.color`	#49454F `md.comp.secondary-navigation-tab.inactive.label-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Secondary navigation tab label text font`md.comp.secondary-navigation-tab.label-text.font`	Roboto `md.comp.secondary-navigation-tab.label-text.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain`
Secondary navigation tab label text line height`md.comp.secondary-navigation-tab.label-text.line-height`	20pt `md.comp.secondary-navigation-tab.label-text.line-height` `md.sys.typescale.title-small.line-height`
Secondary navigation tab label text size`md.comp.secondary-navigation-tab.label-text.size`	14pt `md.comp.secondary-navigation-tab.label-text.size` `md.sys.typescale.title-small.size`
Secondary navigation tab label text tracking`md.comp.secondary-navigation-tab.label-text.tracking`	0.1pt `md.comp.secondary-navigation-tab.label-text.tracking` `md.sys.typescale.title-small.tracking`
Type style`md.comp.secondary-navigation-tab.label-text.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.secondary-navigation-tab.label-text.type` `md.comp.secondary-navigation-tab.label-text.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain` `md.comp.secondary-navigation-tab.label-text.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium` `md.comp.secondary-navigation-tab.label-text.size` `md.sys.typescale.title-small.size` `md.comp.secondary-navigation-tab.label-text.line-height` `md.sys.typescale.title-small.line-height` `md.comp.secondary-navigation-tab.label-text.tracking` `md.sys.typescale.title-small.tracking`
Secondary navigation tab label text weight`md.comp.secondary-navigation-tab.label-text.weight`	500 `md.comp.secondary-navigation-tab.label-text.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium`

Icon

Icon tokens
Token	Value
Secondary navigation tab with icon active icon color`md.comp.secondary-navigation-tab.with-icon.active.icon.color`	#1D1B20 `md.comp.secondary-navigation-tab.with-icon.active.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Secondary navigation tab with icon icon size`md.comp.secondary-navigation-tab.with-icon.icon.size`	24dp `md.comp.secondary-navigation-tab.with-icon.icon.size`
Secondary navigation tab with icon inactive icon color`md.comp.secondary-navigation-tab.with-icon.inactive.icon.color`	#49454F `md.comp.secondary-navigation-tab.with-icon.inactive.icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`

Divider

Divider tokens
Token	Value
Secondary navigation tab divider color`md.comp.secondary-navigation-tab.divider.color`	#E7E0EC `md.comp.secondary-navigation-tab.divider.color` `md.sys.color.surface-variant` `md.ref.palette.neutral-variant90`
Secondary navigation tab divider height`md.comp.secondary-navigation-tab.divider.height`	1dp `md.comp.secondary-navigation-tab.divider.height`

Active indicator

Active indicator tokens
Token	Value
Secondary navigation tab active indicator color`md.comp.secondary-navigation-tab.active-indicator.color`	#6750A4 `md.comp.secondary-navigation-tab.active-indicator.color` `md.sys.color.primary` `md.ref.palette.primary40`
Secondary navigation tab active indicator height`md.comp.secondary-navigation-tab.active-indicator.height`	2dp `md.comp.secondary-navigation-tab.active-indicator.height`

Hovered

Label text

Label text tokens
Token	Value
Secondary navigation tab hover label text color`md.comp.secondary-navigation-tab.hover.label-text.color`	#1D1B20 `md.comp.secondary-navigation-tab.hover.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Secondary navigation tab hover state layer color`md.comp.secondary-navigation-tab.hover.state-layer.color`	#1D1B20 `md.comp.secondary-navigation-tab.hover.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Secondary navigation tab hover state layer opacity`md.comp.secondary-navigation-tab.hover.state-layer.opacity`	8% `md.comp.secondary-navigation-tab.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`

Icon

Icon tokens
Token	Value
Secondary navigation tab with icon hover icon color`md.comp.secondary-navigation-tab.with-icon.hover.icon.color`	#1D1B20 `md.comp.secondary-navigation-tab.with-icon.hover.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

Focused

Focus indicator

Focus indicator tokens
Token	Value
Secondary navigation tab focus indicator color`md.comp.secondary-navigation-tab.focus.indicator.color`	#625B71 `md.comp.secondary-navigation-tab.focus.indicator.color` `md.sys.color.secondary` `md.ref.palette.secondary40`
Secondary navigation tab focus indicator offset`md.comp.secondary-navigation-tab.focus.indicator.outline.offset`	-3dp `md.comp.secondary-navigation-tab.focus.indicator.outline.offset` `md.sys.state.focus-indicator.inner-offset`
Secondary navigation tab focus indicator thickness`md.comp.secondary-navigation-tab.focus.indicator.thickness`	3dp `md.comp.secondary-navigation-tab.focus.indicator.thickness` `md.sys.state.focus-indicator.thickness`

Label text

Label text tokens
Token	Value
Secondary navigation tab focus label text color`md.comp.secondary-navigation-tab.focus.label-text.color`	#1D1B20 `md.comp.secondary-navigation-tab.focus.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Secondary navigation tab focus state layer color`md.comp.secondary-navigation-tab.focus.state-layer.color`	#1D1B20 `md.comp.secondary-navigation-tab.focus.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Secondary navigation tab focus state layer opacity`md.comp.secondary-navigation-tab.focus.state-layer.opacity`	10% `md.comp.secondary-navigation-tab.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`

Icon

Icon tokens
Token	Value
Secondary navigation tab with icon focus icon color`md.comp.secondary-navigation-tab.with-icon.focus.icon.color`	#1D1B20 `md.comp.secondary-navigation-tab.with-icon.focus.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

Pressed (ripple)

Label text

Label text tokens
Token	Value
Secondary navigation tab pressed label text color`md.comp.secondary-navigation-tab.pressed.label-text.color`	#1D1B20 `md.comp.secondary-navigation-tab.pressed.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

State layer

State layer tokens
Token	Value
Secondary navigation tab pressed state layer color`md.comp.secondary-navigation-tab.pressed.state-layer.color`	#1D1B20 `md.comp.secondary-navigation-tab.pressed.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Secondary navigation tab pressed state layer opacity`md.comp.secondary-navigation-tab.pressed.state-layer.opacity`	10% `md.comp.secondary-navigation-tab.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`

Icon

Icon tokens
Token	Value
Secondary navigation tab with icon pressed icon color`md.comp.secondary-navigation-tab.with-icon.pressed.icon.color`	#1D1B20 `md.comp.secondary-navigation-tab.with-icon.pressed.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`