Component

Material Design 3 toolbars 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.

Enabled
Enabled tokens
TokenValue
Toolbar standard container colormd.comp.toolbar.standard.container.color
#F3EDF7
Toolbar standard button container colormd.comp.toolbar.standard.button.container.color
#F3EDF7
Toolbar standard selected button container colormd.comp.toolbar.standard.selected.button.container.color
#E8DEF8
Toolbar standard icon colormd.comp.toolbar.standard.icon.color
#49454F
Toolbar standard selected icon colormd.comp.toolbar.standard.selected.icon.color
#4A4458
Toolbar standard label colormd.comp.toolbar.standard.label-text.color
#49454F
Toolbar standard selected label colormd.comp.toolbar.standard.selected.label-text.color
#4A4458
Toolbar standard container shapemd.comp.toolbar.standard.container.shape
Full
Disabled
Disabled tokens
TokenValue
Toolbar standard disabled icon colormd.comp.toolbar.standard.disabled.icon.color
#1D1B20
Toolbar standard disabled icon opacitymd.comp.toolbar.standard.disabled.icon.opacity
38%
Toolbar standard disabled label colormd.comp.toolbar.standard.disabled.label-text.color
#1D1B20
Toolbar standard disabled label opacitymd.comp.toolbar.standard.disabled.label-text.opacity
38%
Hovered
Hovered tokens
TokenValue
Toolbar standard hovered state layer colormd.comp.toolbar.standard.hovered.state-layer.color
#49454F
Toolbar standard selected hovered state layer colormd.comp.toolbar.standard.selected.hovered.state-layer.color
#4A4458
Toolbar standard hovered state layer opacitymd.comp.toolbar.standard.hovered.state-layer.opacity
8%
Toolbar standard hovered icon colormd.comp.toolbar.standard.hovered.icon.color
#49454F
Toolbar standard selected hovered icon colormd.comp.toolbar.standard.selected.hovered.icon.color
#4A4458
Toolbar standard hovered label colormd.comp.toolbar.standard.hovered.label-text.color
#49454F
Toolbar standard selected hovered label colormd.comp.toolbar.standard.selected.hovered.label-text.color
#4A4458
Focused
Focused tokens
TokenValue
Toolbar standard focused state layer colormd.comp.toolbar.standard.focused.state-layer.color
#49454F
Toolbar standard selected focused state layer colormd.comp.toolbar.standard.selected.focused.state-layer.color
#4A4458
Toolbar standard focused state layer opacitymd.comp.toolbar.standard.focused.state-layer.opacity
10%
Toolbar standard focused icon colormd.comp.toolbar.standard.focused.icon.color
#49454F
Toolbar standard selected focused icon colormd.comp.toolbar.standard.selected.focused.icon.color
#4A4458
Toolbar standard focused label colormd.comp.toolbar.standard.focused.label-text.color
#49454F
Toolbar standard selected focused label colormd.comp.toolbar.standard.selected.focused.label-text.color
#4A4458
Pressed
Pressed tokens
TokenValue
Toolbar standard pressed state layer colormd.comp.toolbar.standard.pressed.state-layer.color
#49454F
Toolbar standard selected pressed state layer colormd.comp.toolbar.standard.selected.pressed.state-layer.color
#4A4458
Toolbar standard pressed state layer opacitymd.comp.toolbar.standard.pressed.state-layer.opacity
10%
Toolbar standard pressed icon colormd.comp.toolbar.standard.pressed.icon.color
#49454F
Toolbar standard selected pressed icon colormd.comp.toolbar.standard.selected.pressed.icon.color
#4A4458
Toolbar standard pressed label colormd.comp.toolbar.standard.pressed.label-text.color
#49454F
Toolbar standard selected pressed label colormd.comp.toolbar.standard.selected.pressed.label-text.color
#4A4458