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.

Font

Enabled
Container
Container tokens
TokenValue
Outlined segmented button outline colormd.comp.outlined-segmented-button.outline.color
#79747E
Outlined segmented button outline widthmd.comp.outlined-segmented-button.outline.width
1dp
Outlined segmented button container heightmd.comp.outlined-segmented-button.container.height
40dp
Outlined segmented button selected container colormd.comp.outlined-segmented-button.selected.container.color
#E8DEF8
Outlined segmented button shapemd.comp.outlined-segmented-button.shape
Full
Label text
Label text tokens
TokenValue
Outlined segmented button unselected label text colormd.comp.outlined-segmented-button.unselected.label-text.color
#1D1B20
Outlined segmented button selected label text colormd.comp.outlined-segmented-button.selected.label-text.color
#4A4458
Outlined segmented button label text fontmd.comp.outlined-segmented-button.label-text.font
Roboto
Outlined segmented button label text line heightmd.comp.outlined-segmented-button.label-text.line-height
20pt
Outlined segmented button label text sizemd.comp.outlined-segmented-button.label-text.size
14pt
Outlined segmented button label text trackingmd.comp.outlined-segmented-button.label-text.tracking
0.1pt
Outlined segmented button label text weightmd.comp.outlined-segmented-button.label-text.weight
500
Outlined segmented button label text typemd.comp.outlined-segmented-button.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Icon
Icon tokens
TokenValue
Outlined segmented button unselected icon colormd.comp.outlined-segmented-button.unselected.with-icon.icon.color
#1D1B20
Outlined segmented button selected icon colormd.comp.outlined-segmented-button.selected.with-icon.icon.color
#4A4458
Outlined segmented button icon sizemd.comp.outlined-segmented-button.with-icon.icon.size
18dp
Disabled
Container
Container tokens
TokenValue
Outlined segmented button disabled outline colormd.comp.outlined-segmented-button.disabled.outline.color
#1D1B20
Outlined segmented button disabled outline opacitymd.comp.outlined-segmented-button.disabled.outline.opacity
12%
Label text
Label text tokens
TokenValue
Outlined segmented button disabled label text colormd.comp.outlined-segmented-button.disabled.label-text.color
#1D1B20
Outlined segmented button disabled label text opacitymd.comp.outlined-segmented-button.disabled.label-text.opacity
38%
Icon
Icon tokens
TokenValue
Outlined segmented button disabled icon colormd.comp.outlined-segmented-button.disabled.icon.color
#1D1B20
Outlined segmented button disabled icon opacitymd.comp.outlined-segmented-button.disabled.icon.opacity
38%
Hovered
Label text
Label text tokens
TokenValue
Outlined segmented button unselected hover label text colormd.comp.outlined-segmented-button.unselected.hover.label-text.color
#1D1B20
Outlined segmented button selected hover label text colormd.comp.outlined-segmented-button.selected.hover.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Outlined segmented button unselected hover state layer colormd.comp.outlined-segmented-button.unselected.hover.state-layer.color
#1D1B20
Outlined segmented button selected hover state layer colormd.comp.outlined-segmented-button.selected.hover.state-layer.color
#4A4458
Outlined segmented button hover state layer opacitymd.comp.outlined-segmented-button.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Outlined segmented button unselected hover icon colormd.comp.outlined-segmented-button.unselected.hover.icon.color
#1D1B20
Outlined segmented button selected hover icon colormd.comp.outlined-segmented-button.selected.hover.icon.color
#4A4458
Focused
Focus indicator
Focus indicator tokens
TokenValue
Outlined segmented button focus indicator colormd.comp.outlined-segmented-button.focus.indicator.color
#625B71
Outlined segmented button focus indicator thicknessmd.comp.outlined-segmented-button.focus.indicator.thickness
3dp
Outlined segmented button focus indicator offsetmd.comp.outlined-segmented-button.focus.indicator.outline.offset
2dp
Label text
Label text tokens
TokenValue
Outlined segmented button unselected focus label text colormd.comp.outlined-segmented-button.unselected.focus.label-text.color
#1D1B20
Outlined segmented button selected focus label text colormd.comp.outlined-segmented-button.selected.focus.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Outlined segmented button unselected focus state layer colormd.comp.outlined-segmented-button.unselected.focus.state-layer.color
#1D1B20
Outlined segmented button selected focus state layer colormd.comp.outlined-segmented-button.selected.focus.state-layer.color
#4A4458
Outlined segmented button focus state layer opacitymd.comp.outlined-segmented-button.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Outlined segmented button unselected focus icon colormd.comp.outlined-segmented-button.unselected.focus.icon.color
#1D1B20
Outlined segmented button selected focus icon colormd.comp.outlined-segmented-button.selected.focus.icon.color
#4A4458
Pressed (ripple)
Label text
Label text tokens
TokenValue
Outlined segmented button unselected pressed label text colormd.comp.outlined-segmented-button.unselected.pressed.label-text.color
#1D1B20
Outlined segmented button selected pressed label text colormd.comp.outlined-segmented-button.selected.pressed.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Outlined segmented button unselected pressed state layer colormd.comp.outlined-segmented-button.unselected.pressed.state-layer.color
#1D1B20
Outlined segmented button selected pressed state layer colormd.comp.outlined-segmented-button.selected.pressed.state-layer.color
#4A4458
Outlined segmented button pressed state layer opacitymd.comp.outlined-segmented-button.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Outlined segmented button unselected pressed icon colormd.comp.outlined-segmented-button.unselected.pressed.icon.color
#1D1B20
Outlined segmented button selected pressed icon colormd.comp.outlined-segmented-button.selected.pressed.icon.color
#4A4458