CodeAI

Segmented Button

A group of connected buttons for choosing one option from a small mutually exclusive set. Selected segment uses selected tokens.

Appearance

Value

State

Accessibility

Props — SegmentedButton
View MUI docs
PropTypeDescription
size"large" | "medium" | "small" | "extraSmall"Segment height. Default medium (40).
valuestringControlled selected segment value.
defaultValuestringInitial selected value (uncontrolled).
onChange(value: string) => voidCalled when the selected segment changes.
optionsSegmentedButtonOption[]Segment labels, icons, values, and optional per-segment tooltip (iconOnly).
iconOnlybooleanSquare icon-only segments.
disabledbooleanDisables the entire group.
aria-labelstringAccessible name for the segment group.