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
Secondary navigation tab container colormd.comp.secondary-navigation-tab.container.color
#FEF7FF
Secondary navigation tab container shapemd.comp.secondary-navigation-tab.container.shape
0dp
Secondary navigation tab container heightmd.comp.secondary-navigation-tab.container.height
48dp
Secondary navigation tab container elevationmd.comp.secondary-navigation-tab.container.elevation
0dp
Secondary navigation tab container shadow colormd.comp.secondary-navigation-tab.container.shadow-color
#000000
Label text
Label text tokens
TokenValue
Secondary navigation tab label text fontmd.comp.secondary-navigation-tab.label-text.font
Roboto
Secondary navigation tab label text line heightmd.comp.secondary-navigation-tab.label-text.line-height
20pt
Secondary navigation tab label text sizemd.comp.secondary-navigation-tab.label-text.size
14pt
Secondary navigation tab label text weightmd.comp.secondary-navigation-tab.label-text.weight
500
Secondary navigation tab label text trackingmd.comp.secondary-navigation-tab.label-text.tracking
0.1pt
Type stylemd.comp.secondary-navigation-tab.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Secondary navigation tab active label text colormd.comp.secondary-navigation-tab.active.label-text.color
#1D1B20
Secondary navigation tab inactive label text colormd.comp.secondary-navigation-tab.inactive.label-text.color
#49454F
Icon
Icon tokens
TokenValue
Secondary navigation tab with icon icon sizemd.comp.secondary-navigation-tab.with-icon.icon.size
24dp
Secondary navigation tab with icon active icon colormd.comp.secondary-navigation-tab.with-icon.active.icon.color
#1D1B20
Secondary navigation tab with icon inactive icon colormd.comp.secondary-navigation-tab.with-icon.inactive.icon.color
#49454F
Divider
Divider tokens
TokenValue
Secondary navigation tab divider colormd.comp.secondary-navigation-tab.divider.color
#E7E0EC
Secondary navigation tab divider heightmd.comp.secondary-navigation-tab.divider.height
1dp
Active indicator
Active indicator tokens
TokenValue
Secondary navigation tab active indicator colormd.comp.secondary-navigation-tab.active-indicator.color
#6750A4
Secondary navigation tab active indicator heightmd.comp.secondary-navigation-tab.active-indicator.height
2dp
Hovered
Label text
Label text tokens
TokenValue
Secondary navigation tab hover label text colormd.comp.secondary-navigation-tab.hover.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Secondary navigation tab hover state layer colormd.comp.secondary-navigation-tab.hover.state-layer.color
#1D1B20
Secondary navigation tab hover state layer opacitymd.comp.secondary-navigation-tab.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Secondary navigation tab with icon hover icon colormd.comp.secondary-navigation-tab.with-icon.hover.icon.color
#1D1B20
Focused
Focus indicator
Focus indicator tokens
TokenValue
Secondary navigation tab focus indicator colormd.comp.secondary-navigation-tab.focus.indicator.color
#625B71
Secondary navigation tab focus indicator thicknessmd.comp.secondary-navigation-tab.focus.indicator.thickness
3dp
Secondary navigation tab focus indicator offsetmd.comp.secondary-navigation-tab.focus.indicator.outline.offset
-3dp
Label text
Label text tokens
TokenValue
Secondary navigation tab focus label text colormd.comp.secondary-navigation-tab.focus.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Secondary navigation tab focus state layer colormd.comp.secondary-navigation-tab.focus.state-layer.color
#1D1B20
Secondary navigation tab focus state layer opacitymd.comp.secondary-navigation-tab.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Secondary navigation tab with icon focus icon colormd.comp.secondary-navigation-tab.with-icon.focus.icon.color
#1D1B20
Pressed (ripple)
Label text
Label text tokens
TokenValue
Secondary navigation tab pressed label text colormd.comp.secondary-navigation-tab.pressed.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Secondary navigation tab pressed state layer colormd.comp.secondary-navigation-tab.pressed.state-layer.color
#1D1B20
Secondary navigation tab pressed state layer opacitymd.comp.secondary-navigation-tab.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Secondary navigation tab with icon pressed icon colormd.comp.secondary-navigation-tab.with-icon.pressed.icon.color
#1D1B20