Component

Material Design 3 primary navigation tab tokens

Browse tokens

TokenValue
Enabled
Enabled tokens
TokenValue
Primary navigation tab active indicator shapemd.comp.primary-navigation-tab.active-indicator.shapeRounded Corners · BottomLeft: BottomLeft: Unit: DIPS · BottomRight: BottomRight: Unit: DIPS · DefaultSize: 3dp · TopLeft: TopLeft: Unit: DIPS · Value: 3 · TopRight: TopRight: Unit: DIPS · Value: 3
Primary navigation tab container shapemd.comp.primary-navigation-tab.container.shape
md.sys.shape.corner.noneShow reference chainHide reference chain
md.comp.primary-navigation-tab.container.shape
  • md.sys.shape.corner.none
Rounded Corners · DefaultSize: No value specified (dp)
Active Indicator
Active Indicator tokens
TokenValue
Primary navigation tab active indicator heightmd.comp.primary-navigation-tab.active-indicator.height3dp
Container
Container tokens
TokenValue
Primary navigation tab container heightmd.comp.primary-navigation-tab.container.height48dp
Divider
Divider tokens
TokenValue
Primary navigation tab divider heightmd.comp.primary-navigation-tab.divider.height1dp
With Icon
Icon
Icon tokens
TokenValue
Primary navigation tab with icon sizemd.comp.primary-navigation-tab.with-icon.icon.size24dp
Focused
Indicator
Indicator tokens
TokenValue
Primary navigation tab focus indicator thicknessmd.comp.primary-navigation-tab.focus.indicator.thickness
md.sys.state.focus-indicator.thicknessShow reference chainHide reference chain
md.comp.primary-navigation-tab.focus.indicator.thickness
  • md.sys.state.focus-indicator.thickness
3dp
Outline
Outline tokens
TokenValue
Primary navigation tab focus indicator offsetmd.comp.primary-navigation-tab.focus.indicator.outline.offset
md.sys.state.focus-indicator.inner-offsetShow reference chainHide reference chain
md.comp.primary-navigation-tab.focus.indicator.outline.offset
  • md.sys.state.focus-indicator.inner-offset
-3dp