Tabs
- 1: Container
- 2: Icon (optional)
- 3: Label
- 4: Divider
- 4: Active indicator
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.tabs.containerShape | ds.sys.shape.corner.none |
| ds.comp.tabs.containerColor | ds.sys.color.surfaceContainer |
| ds.comp.tabs.containerElevation | ds.sys.elevation.level0 |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.tabs.iconSize | 24dp |
Details
Label
| Token | Value |
|---|---|
| ds.comp.tabs.labelTypeScale | ds.sys.typeScale.titleSmall |
| ds.comp.tabs.labelInactiveColor | ds.sys.color.onSurfaceVariant |
| ds.comp.tabs.labelActiveColor | ds.sys.color.primary |
Details
Divider
| Token | Value |
|---|---|
| ds.comp.tabs.dividerThickness | 1dp |
| ds.comp.tabs.dividerColor | ds.sys.color.outlineVariant |
Details
Active Indicator
| Token | Value |
|---|---|
| ds.comp.tabs.activeIndicatorColor | ds.sys.color.primary |
| ds.comp.tabs.activeIndicatorHeight | 3dp |
Pressed
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.tabs.pressedStateLayerColor | ds.sys.color.primary |
| ds.comp.tabs.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |