Segmented buttons

Segmented buttons help people select options, switch views, or sort elements.

Overview · Specs · Guidelines · Accessibility

Note

Segmented buttons are no longer recommended in the Material 3 expressive update. For those who have updated, use the connected button group instead, which has mostly the same functionality but with an updated visual design.

1. Container
2. Icon (optional for unselected state) 
3. Label text

Tokens and specs

Browse the component elements, attributes, tokens, and their values. Learn more about design tokens

Design tokens

Token table

Machine-readable relationship table

Segmented buttons tokens · 1 token set · 46 tokens · live token table · DSDB TOKEN_TABLE.67e2613d87ca6f98

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Segmented button - Outlined · md.comp.outlined-segmented-button · 46 tokens

This component is not recommended. Use connected button groups instead. For outlined segmented buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.outlined-segmented-button.outline.color	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
Enabled › Container	md.comp.outlined-segmented-button.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.outlined-segmented-button.container.height	Length	—	40dp	—
Enabled › Container	md.comp.outlined-segmented-button.selected.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled › Container	md.comp.outlined-segmented-button.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Label text	md.comp.outlined-segmented-button.unselected.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.outlined-segmented-button.selected.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Label text	md.comp.outlined-segmented-button.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.outlined-segmented-button.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.outlined-segmented-button.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.outlined-segmented-button.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.outlined-segmented-button.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.outlined-segmented-button.label-text.type	Typography	composite font names: md.comp.outlined-segmented-button.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.outlined-segmented-button.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.outlined-segmented-button.label-text.size → md.sys.typescale.label-large.size line height: md.comp.outlined-segmented-button.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.outlined-segmented-button.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Icon	md.comp.outlined-segmented-button.unselected.with-icon.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Icon	md.comp.outlined-segmented-button.selected.with-icon.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.outlined-segmented-button.with-icon.icon.size	Length	—	18dp	—
Disabled › Container	md.comp.outlined-segmented-button.disabled.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.outlined-segmented-button.disabled.outline.opacity	Opacity	—	0.12	—
Disabled › Label text	md.comp.outlined-segmented-button.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.outlined-segmented-button.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Icon	md.comp.outlined-segmented-button.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.outlined-segmented-button.disabled.icon.opacity	Opacity	—	0.38	—
Hovered › Label text	md.comp.outlined-segmented-button.unselected.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Label text	md.comp.outlined-segmented-button.selected.hover.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › State layer	md.comp.outlined-segmented-button.unselected.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.outlined-segmented-button.selected.hover.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › State layer	md.comp.outlined-segmented-button.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Icon	md.comp.outlined-segmented-button.unselected.hover.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Icon	md.comp.outlined-segmented-button.selected.hover.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Label text	md.comp.outlined-segmented-button.unselected.focus.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Label text	md.comp.outlined-segmented-button.selected.focus.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › State layer	md.comp.outlined-segmented-button.unselected.focus.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › State layer	md.comp.outlined-segmented-button.selected.focus.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › State layer	md.comp.outlined-segmented-button.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Icon	md.comp.outlined-segmented-button.unselected.focus.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Icon	md.comp.outlined-segmented-button.selected.focus.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Focus indicator	md.comp.outlined-segmented-button.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.outlined-segmented-button.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.outlined-segmented-button.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Pressed (ripple) › Label text	md.comp.outlined-segmented-button.unselected.pressed.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › Label text	md.comp.outlined-segmented-button.selected.pressed.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › State layer	md.comp.outlined-segmented-button.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › State layer	md.comp.outlined-segmented-button.selected.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › State layer	md.comp.outlined-segmented-button.pressed.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Pressed (ripple) › Icon	md.comp.outlined-segmented-button.unselected.pressed.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › Icon	md.comp.outlined-segmented-button.selected.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100

Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens

Segmented button color roles used for light and dark schemes:

1. On surface
2. Outline
3. Secondary container
4. On secondary container

States

States are visual representations used to communicate the status of a component or interactive element.  Learn more about interaction states

Unselected

Unselected button states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed

Selected

Selected button states:

1. Selected 
2. Hovered on selected
3. Focused on selected
4. Pressed on selected

Measurements

1. Padding and container size 
2. Target size

Attribute	Value
Container width	Dynamic based on labels
Segment width	Container width / total segments (Example: 1/3)
Height	40dp
Outline width	1dp
Label alignment	Center
Left/right padding	Min 12dp
Padding between elements	8dp
Target size	48dp

Density

Density can be used in denser UIs where space is limited. Density is only applied to the height.

Each step down in density removes 4dp from the height