Stylish
A connected segmented control for mutually exclusive selection among a small set of options.
Renders a horizontally joined row of segment buttons where exactly one segment is visually highlighted at a time. Use this when the user must pick one mode or view from two-to-five alternatives (e.g. list vs. grid). Internally composes StylishConnectedButtonRow and maps each StylishSegmentedOption to a StylishConnectedButtonItem; a custom button renderer animates each segment's container/content colors when the selection changes, so the highlight cross-fades instead of snapping.
Parameters
The selectable segments. Each StylishSegmentedOption carries a value, a display label, an enabled flag, and optional leadingContent/trailingContent icon slots rendered before/after the label.
The currently selected value. The segment whose StylishSegmentedOption.value equals this is rendered with selectedColors.
Callback invoked with the tapped segment's value.
TextStyle for each segment label. Defaults to MaterialTheme.typography.labelLarge.
Maximum lines for each segment label. Defaults to 1.
TextOverflow strategy when a label exceeds labelMaxLines. Defaults to TextOverflow.Ellipsis.
ButtonColors applied to the active segment. Defaults to MaterialTheme.colorScheme.primary container with MaterialTheme.colorScheme.onPrimary content.
ButtonColors applied to inactive segments. Defaults to MaterialTheme.stylishComponentColors.groupedContainer container with MaterialTheme.colorScheme.onSurface content.
Horizontal gap between joined segments. Defaults to StylishTheme.dimensions.connectedSpacing (typically 3.dp).