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.vibrant.container.color
#EADDFF
Toolbar vibrant button container colormd.comp.toolbar.vibrant.button.container.color
#EADDFF
Toolbar vibrant selected button container colormd.comp.toolbar.vibrant.selected.button.container.color
#F3EDF7
Toolbar vibrant icon colormd.comp.toolbar.vibrant.icon.color
#4F378B
Toolbar vibrant selected icon colormd.comp.toolbar.vibrant.selected.icon.color
#1D1B20
Toolbar vibrant label colormd.comp.toolbar.vibrant.label-text.color
#4F378B
Toolbar vibrant selected label colormd.comp.toolbar.vibrant.selected.label-text.color
#1D1B20
Toolbar vibrant container shapemd.comp.toolbar.vibrant.container.shape
Full
Disabled
Disabled tokens
TokenValue
Toolbar vibrant disabled icon colormd.comp.toolbar.vibrant.disabled.icon.color
#1D1B20
Toolbar vibrant disabled icon opacitymd.comp.toolbar.vibrant.disabled.icon.opacity
38%
Toolbar vibrant disabled label colormd.comp.toolbar.vibrant.disabled.label-text.color
#1D1B20
Toolbar vibrant disabled label opacitymd.comp.toolbar.vibrant.disabled.label-text.opacity
38%
Hovered
Hovered tokens
TokenValue
Toolbar vibrant hovered state layer colormd.comp.toolbar.vibrant.hovered.state-layer.color
#4F378B
Toolbar vibrant selected hovered state layer colormd.comp.toolbar.vibrant.selected.hovered.state-layer.color
#1D1B20
Toolbar vibrant hovered state layer opacitymd.comp.toolbar.vibrant.hovered.state-layer.opacity
8%
Toolbar vibrant hovered icon colormd.comp.toolbar.vibrant.hovered.icon.color
#4F378B
Toolbar vibrant selected hovered icon colormd.comp.toolbar.vibrant.selected.hovered.icon.color
#1D1B20
Toolbar vibrant hovered label colormd.comp.toolbar.vibrant.hovered.label-text.color
#4F378B
Toolbar vibrant selected hovered label colormd.comp.toolbar.vibrant.selected.hovered.label-text.color
#1D1B20
Focused
Focused tokens
TokenValue
Toolbar vibrant focused state layer colormd.comp.toolbar.vibrant.focused.state-layer.color
#4F378B
Toolbar vibrant selected focused state layer colormd.comp.toolbar.vibrant.selected.focused.state-layer.color
#1D1B20
Toolbar vibrant focused state layer opacitymd.comp.toolbar.vibrant.focused.state-layer.opacity
10%
Toolbar vibrant focused icon colormd.comp.toolbar.vibrant.focused.icon.color
#4F378B
Toolbar vibrant selected focused icon colormd.comp.toolbar.vibrant.selected.focused.icon.color
#1D1B20
Toolbar vibrant focused label colormd.comp.toolbar.vibrant.focused.label-text.color
#4F378B
Toolbar vibrant selected focused label colormd.comp.toolbar.vibrant.selected.focused.label-text.color
#1D1B20
Pressed
Pressed tokens
TokenValue
Toolbar vibrant pressed state layer colormd.comp.toolbar.vibrant.pressed.state-layer.color
#4F378B
Toolbar vibrant selected pressed state layer colormd.comp.toolbar.vibrant.selected.pressed.state-layer.color
#1D1B20
Toolbar vibrant pressed state layer opacitymd.comp.toolbar.vibrant.pressed.state-layer.opacity
10%
Toolbar vibrant pressed icon colormd.comp.toolbar.vibrant.pressed.icon.color
#4F378B
Toolbar vibrant selected pressed icon colormd.comp.toolbar.vibrant.selected.pressed.icon.color
#1D1B20
Toolbar vibrant pressed label colormd.comp.toolbar.vibrant.pressed.label-text.color
#4F378B
Toolbar vibrant selected pressed label colormd.comp.toolbar.vibrant.selected.pressed.label-text.color
#1D1B20