Component

Material Design 3 standard toolbar 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 button container colormd.comp.toolbar.standard.button.container.color
md.sys.color.surface-containerShow reference chainHide reference chain
md.comp.toolbar.standard.button.container.color
  • md.sys.color.surface-container
    • md.ref.palette.neutral94
#F3EDF7
Toolbar standard container colormd.comp.toolbar.standard.container.color
md.sys.color.surface-containerShow reference chainHide reference chain
md.comp.toolbar.standard.container.color
  • md.sys.color.surface-container
    • md.ref.palette.neutral94
#F3EDF7
Toolbar standard icon colormd.comp.toolbar.standard.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard label colormd.comp.toolbar.standard.label-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.label-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard selected button container colormd.comp.toolbar.standard.selected.button.container.color
md.sys.color.secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.button.container.color
  • md.sys.color.secondary-container
    • md.ref.palette.secondary90
#E8DEF8
Toolbar standard selected icon colormd.comp.toolbar.standard.selected.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected label colormd.comp.toolbar.standard.selected.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Disabled
Disabled tokens
TokenValue
Toolbar standard disabled icon colormd.comp.toolbar.standard.disabled.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.toolbar.standard.disabled.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Toolbar standard disabled icon opacitymd.comp.toolbar.standard.disabled.icon.opacity38%
Toolbar standard disabled label colormd.comp.toolbar.standard.disabled.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.toolbar.standard.disabled.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Toolbar standard disabled label opacitymd.comp.toolbar.standard.disabled.label-text.opacity38%
Hovered
Hovered tokens
TokenValue
Toolbar standard hovered icon colormd.comp.toolbar.standard.hovered.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.hovered.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard hovered label colormd.comp.toolbar.standard.hovered.label-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.hovered.label-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard hovered state layer colormd.comp.toolbar.standard.hovered.state-layer.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.hovered.state-layer.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard hovered state layer opacitymd.comp.toolbar.standard.hovered.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.toolbar.standard.hovered.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Toolbar standard selected hovered icon colormd.comp.toolbar.standard.selected.hovered.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.hovered.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected hovered label colormd.comp.toolbar.standard.selected.hovered.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.hovered.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected hovered state layer colormd.comp.toolbar.standard.selected.hovered.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.hovered.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Focused
Focused tokens
TokenValue
Toolbar standard focused icon colormd.comp.toolbar.standard.focused.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.focused.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard focused label colormd.comp.toolbar.standard.focused.label-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.focused.label-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard focused state layer colormd.comp.toolbar.standard.focused.state-layer.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.focused.state-layer.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard focused state layer opacitymd.comp.toolbar.standard.focused.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.toolbar.standard.focused.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Toolbar standard selected focused icon colormd.comp.toolbar.standard.selected.focused.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.focused.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected focused label colormd.comp.toolbar.standard.selected.focused.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.focused.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected focused state layer colormd.comp.toolbar.standard.selected.focused.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.focused.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Pressed
Pressed tokens
TokenValue
Toolbar standard pressed icon colormd.comp.toolbar.standard.pressed.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.pressed.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard pressed label colormd.comp.toolbar.standard.pressed.label-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.pressed.label-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard pressed state layer colormd.comp.toolbar.standard.pressed.state-layer.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.toolbar.standard.pressed.state-layer.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Toolbar standard pressed state layer opacitymd.comp.toolbar.standard.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.toolbar.standard.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Toolbar standard selected pressed icon colormd.comp.toolbar.standard.selected.pressed.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.pressed.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected pressed label colormd.comp.toolbar.standard.selected.pressed.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.pressed.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Toolbar standard selected pressed state layer colormd.comp.toolbar.standard.selected.pressed.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.toolbar.standard.selected.pressed.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458