Segmented Control
Sizes, controlled state, full-width, transparent track, colour variants, and icon-only usage.
Segmented Control
Sizes
sm
md
lg
Controlled
View
Selected: grid
Period
Selected: month
Disabled items
Longer labels
Full-width
fullWidth stretches the control to fill its container and distributes all items equally — regardless of label length. Ideal for view toggles inside toolbars, card headers, or modal footers where uneven cell widths would look unintentional. Compare with "Longer labels" above.
All sizes, full-width
Transparent track
transparent drops the track fill so the control blends into an already-tinted surface (shown below on a brand-tinted panel). Pair it with a variant to keep the branded label and thumb shadow while the track stays clear.
transparent — on a tinted panel
transparent + variant="primary"
Variant · colour theme
variant themes the whole control — neutral (default), primary, or secondary. It tints the track background with a weak {variant} fill and colours the selected thumb's drop shadow {variant}-strong, so the control picks up the brand's hue. It also tints the selected item's label {variant}-stronger.
neutral
primary
secondary
Icon-only · with a11y labels
Icon-only controls need aria-label on each item so screen readers can announce the option. Add aria-label on the root too, naming what the control selects.