Component

Material Design 3 segmented buttons 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
Outlined segmented button outline colormd.comp.outlined-segmented-button.outline.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.outlined-segmented-button.outline.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Outlined segmented button selected container colormd.comp.outlined-segmented-button.selected.container.color
md.sys.color.secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.container.color
  • md.sys.color.secondary-container
    • md.ref.palette.secondary90
#E8DEF8
Outlined segmented button selected label text colormd.comp.outlined-segmented-button.selected.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected icon colormd.comp.outlined-segmented-button.selected.with-icon.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.with-icon.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button unselected label text colormd.comp.outlined-segmented-button.unselected.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected icon colormd.comp.outlined-segmented-button.unselected.with-icon.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.with-icon.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Disabled
Disabled tokens
TokenValue
Outlined segmented button disabled icon colormd.comp.outlined-segmented-button.disabled.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.disabled.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button disabled icon opacitymd.comp.outlined-segmented-button.disabled.icon.opacity38%
Outlined segmented button disabled label text colormd.comp.outlined-segmented-button.disabled.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.disabled.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button disabled label text opacitymd.comp.outlined-segmented-button.disabled.label-text.opacity38%
Outlined segmented button disabled outline colormd.comp.outlined-segmented-button.disabled.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.disabled.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button disabled outline opacitymd.comp.outlined-segmented-button.disabled.outline.opacity12%
Hovered
Hovered tokens
TokenValue
Outlined segmented button hover state layer opacitymd.comp.outlined-segmented-button.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.outlined-segmented-button.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Outlined segmented button selected hover icon colormd.comp.outlined-segmented-button.selected.hover.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.hover.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected hover label text colormd.comp.outlined-segmented-button.selected.hover.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.hover.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected hover state layer colormd.comp.outlined-segmented-button.selected.hover.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.hover.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button unselected hover icon colormd.comp.outlined-segmented-button.unselected.hover.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.hover.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected hover label text colormd.comp.outlined-segmented-button.unselected.hover.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.hover.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected hover state layer colormd.comp.outlined-segmented-button.unselected.hover.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.hover.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Focused
Focused tokens
TokenValue
Outlined segmented button focus indicator colormd.comp.outlined-segmented-button.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.outlined-segmented-button.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
Outlined segmented button focus state layer opacitymd.comp.outlined-segmented-button.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.outlined-segmented-button.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Outlined segmented button selected focus icon colormd.comp.outlined-segmented-button.selected.focus.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.focus.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected focus label text colormd.comp.outlined-segmented-button.selected.focus.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.focus.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected focus state layer colormd.comp.outlined-segmented-button.selected.focus.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.focus.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button unselected focus icon colormd.comp.outlined-segmented-button.unselected.focus.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.focus.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected focus label text colormd.comp.outlined-segmented-button.unselected.focus.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.focus.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected focus state layer colormd.comp.outlined-segmented-button.unselected.focus.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.focus.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Pressed
Pressed tokens
TokenValue
Outlined segmented button pressed state layer opacitymd.comp.outlined-segmented-button.pressed.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.outlined-segmented-button.pressed.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Outlined segmented button selected pressed icon colormd.comp.outlined-segmented-button.selected.pressed.icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.pressed.icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected pressed label text colormd.comp.outlined-segmented-button.selected.pressed.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.pressed.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button selected pressed state layer colormd.comp.outlined-segmented-button.selected.pressed.state-layer.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.outlined-segmented-button.selected.pressed.state-layer.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
Outlined segmented button unselected pressed icon colormd.comp.outlined-segmented-button.unselected.pressed.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.pressed.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected pressed label text colormd.comp.outlined-segmented-button.unselected.pressed.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.pressed.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Outlined segmented button unselected pressed state layer colormd.comp.outlined-segmented-button.unselected.pressed.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.outlined-segmented-button.unselected.pressed.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20