Component

Material Design 3 tabs tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Container
Container tokens
TokenValue
Primary navigation tab container colormd.comp.primary-navigation-tab.container.color
#FEF7FF
Primary navigation tab container shapemd.comp.primary-navigation-tab.container.shape
0dp
Primary navigation tab container heightmd.comp.primary-navigation-tab.container.height
48dp
Primary navigation tab with icon and label text container heightmd.comp.primary-navigation-tab.with-icon-and-label-text.container.height
64dp
Primary navigation tab container elevationmd.comp.primary-navigation-tab.container.elevation
0dp
Label text
Label text tokens
TokenValue
Primary navigation tab with label text fontmd.comp.primary-navigation-tab.with-label-text.label-text.font
Roboto
Primary navigation tab with label text line heightmd.comp.primary-navigation-tab.with-label-text.label-text.line-height
20pt
Primary navigation tab with label text sizemd.comp.primary-navigation-tab.with-label-text.label-text.size
14pt
Primary navigation tab with label text weightmd.comp.primary-navigation-tab.with-label-text.label-text.weight
500
Primary navigation tab with label text trackingmd.comp.primary-navigation-tab.with-label-text.label-text.tracking
0.1pt
Label text type stylemd.comp.primary-navigation-tab.with-label-text.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Primary navigation tab with label text active colormd.comp.primary-navigation-tab.with-label-text.active.label-text.color
#6750A4
Primary navigation tab with label text inactive colormd.comp.primary-navigation-tab.with-label-text.inactive.label-text.color
#49454F
Icon
Icon tokens
TokenValue
Primary navigation tab with icon sizemd.comp.primary-navigation-tab.with-icon.icon.size
24dp
Primary navigation tab with icon active colormd.comp.primary-navigation-tab.with-icon.active.icon.color
#6750A4
Primary navigation tab with icon inactive colormd.comp.primary-navigation-tab.with-icon.inactive.icon.color
#49454F
Divider
Divider tokens
TokenValue
Primary navigation tab divider colormd.comp.primary-navigation-tab.divider.color
#E7E0EC
Primary navigation tab divider heightmd.comp.primary-navigation-tab.divider.height
1dp
Active indicator
Active indicator tokens
TokenValue
Primary navigation tab active indicator colormd.comp.primary-navigation-tab.active-indicator.color
#6750A4
Primary navigation tab active indicator heightmd.comp.primary-navigation-tab.active-indicator.height
3dp
Primary navigation tab active indicator shapemd.comp.primary-navigation-tab.active-indicator.shape
Default: 3dp · Bottom-right: 0dp · Bottom-left: 0dp
Hovered
Label text
Label text tokens
TokenValue
Primary navigation tab with label text active hover colormd.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color
#6750A4
Primary navigation tab with label text inactive hover colormd.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Primary navigation tab active hover state layer colormd.comp.primary-navigation-tab.active.hover.state-layer.color
#6750A4
Primary navigation tab active hover state layer opacitymd.comp.primary-navigation-tab.active.hover.state-layer.opacity
8%
Primary navigation tab inactive hover state layer colormd.comp.primary-navigation-tab.inactive.hover.state-layer.color
#1D1B20
Primary navigation tab inactive hover state layer opacitymd.comp.primary-navigation-tab.inactive.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Primary navigation tab with icon active hover icon colormd.comp.primary-navigation-tab.with-icon.active.hover.icon.color
#6750A4
Primary navigation tab with icon inactive hover icon colormd.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color
#1D1B20
Focused
Focus indicator
Focus indicator tokens
TokenValue
Primary navigation tab focus indicator colormd.comp.primary-navigation-tab.focus.indicator.color
#625B71
Primary navigation tab focus indicator thicknessmd.comp.primary-navigation-tab.focus.indicator.thickness
3dp
Primary navigation tab focus indicator offsetmd.comp.primary-navigation-tab.focus.indicator.outline.offset
-3dp
Label text
Label text tokens
TokenValue
Primary navigation tab with label text active focus colormd.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color
#6750A4
Primary navigation tab with label text inactive focus colormd.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Primary navigation tab active focus state layer colormd.comp.primary-navigation-tab.active.focus.state-layer.color
#6750A4
Primary navigation tab active focus state layer opacitymd.comp.primary-navigation-tab.active.focus.state-layer.opacity
10%
Primary navigation tab inactive focus state layer colormd.comp.primary-navigation-tab.inactive.focus.state-layer.color
#1D1B20
Primary navigation tab inactive focus state layer opacitymd.comp.primary-navigation-tab.inactive.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Primary navigation tab with icon active focus colormd.comp.primary-navigation-tab.with-icon.active.focus.icon.color
#6750A4
Primary navigation tab with icon inactive focus colormd.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color
#1D1B20
Pressed (ripple)
Label text
Label text tokens
TokenValue
Primary navigation tab with label text active pressed colormd.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color
#6750A4
Primary navigation tab with label text inactive pressed colormd.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Primary navigation tab active pressed state layer colormd.comp.primary-navigation-tab.active.pressed.state-layer.color
#6750A4
Primary navigation tab active pressed state layer opacitymd.comp.primary-navigation-tab.active.pressed.state-layer.opacity
10%
Primary navigation tab inactive pressed state layer colormd.comp.primary-navigation-tab.inactive.pressed.state-layer.color
#6750A4
Primary navigation tab inactive pressed state layer opacitymd.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Primary navigation tab with icon active pressed colormd.comp.primary-navigation-tab.with-icon.active.pressed.icon.color
#6750A4
Primary navigation tab with icon inactive pressed colormd.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color
#1D1B20