Material Design 3Actions

Segmented Button

Segmented buttons allow users to select one or multiple options from a set of related choices. They are ideal for switching between views or filtering content.

Overview

Segmented buttons are a group of buttons that offer multiple related choices. They can be configured for single-select (like radio buttons) or multi-select (like checkboxes). Material Design 3 segmented buttons feature a pill shape with rounded segments and clear selected states.

Single Select

Selected: day

Multi Select

Selected: bold

With Icons Only

Density Variants

Default

Compact

Brand Properties

The following table shows Segmented Button properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Container Height	Dimension	`40px`	`44px`	`48px`
Container Corner Radius	Dimension	`20px (full)`	`9999px (pill)`	`9999px (pill)`
Segment Min Width	Dimension	`48px`	`48px`	`48px`
Segment Padding	Dimension	`12px 24px`	`12px 24px`	`12px 20px`
Divider Width	Dimension	`1px`	`1px`	`1px`
Container Border Width	Dimension	`1px`	`1px`	`1px`
Container Border Color	Color	`#79747E`	`#038012 40%`	`#1A5129 40%`
Unselected Background	Color	`transparent`	`transparent`	`transparent`
Unselected Text Color	Color	`#1C1B1F`	`#038012`	`#1A1A1A`
Selected Background	Color	`#E8DEF8`	`primary + 20%`	`primary + 20%`
Selected Text Color	Color	`#1D192B`	`#038012`	`#1A5129`
Checkmark Icon Size	Dimension	`18px`	`16px`	`18px`
Icon-Label Gap	Dimension	`8px`	`8px`	`8px`
Font Family	Font	`Roboto`	`Open Sans`	`Open Sans`
Font Size	Font Size	`14px`	`14px`	`14px`
Font Weight	Font Weight	`500`	`500`	`600`
Disabled Opacity	Percentage	`38%`	`50%`	`50%`

Accessibility

Use role="group" for the container with aria-label
Single-select: use role="radiogroup" with role="radio" segments
Multi-select: use role="group" with aria-pressed on segments
Support keyboard navigation with arrow keys
Ensure minimum 48px touch target per segment on mobile
Provide clear visual distinction between selected and unselected states

Do's and Don'ts

Do

Use for 2-5 options that are closely related
Keep segment labels short and descriptive
Show checkmark icon for selected state
Use consistent segment widths when possible

Don't

Use for more than 5 options (use tabs or dropdown)
Mix icons and text inconsistently
Use for unrelated or hierarchical options
Make segments too narrow to read labels

Related Components

Material Button - Individual action buttons
Button Group - Related action buttons
Tabs - For navigation between views
Chips - For filtering and selection