Stylish
A horizontally connected row of selectable chips with animated selection-state color transitions, suited for category filters or tab-like selectors.
This is the Finish-layer component: it supplies the Stylish chip rendering (DefaultStylishConnectedChip) to the headless Structure layout ConnectedChipRow, which owns arrangement and connection geometry. Outline edges and corner radii are computed automatically from each item's index. When fillWidth is false (the default) the row scrolls horizontally; when true, every chip receives equal weight and the row fills the available width. Tapping an actionable chip triggers a haptic feedback pulse and animates the container/content colors over 180 ms. Chips are assigned Role.Tab semantics with the selected state reflected from StylishConnectedChipItem.selected. Pass a custom chip to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedChipItem data objects that describe each chip's label, selection state, click action, and optional leading/trailing slot content.
The horizontal gap between adjacent chips. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
When true, chips share the available width equally instead of scrolling. Defaults to false.
Maximum number of lines for the chip label text. Defaults to 1.
The TextOverflow strategy for the chip label when it exceeds labelMaxLines. Defaults to TextOverflow.Ellipsis.
The TextStyle applied to each chip's label. Defaults to MaterialTheme.typography.labelLarge.
The background color of a selected chip. Defaults to MaterialTheme.colorScheme.primary.
The content color of a selected chip. Defaults to MaterialTheme.colorScheme.onPrimary.
The background color of an unselected chip. Defaults to MaterialTheme.stylishComponentColors.groupedContainer.
The content color of an unselected chip. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.
The inner padding of each chip. Defaults to 14 dp horizontal and 10 dp vertical.
The horizontal gap between the leading slot, label, and trailing slot inside each chip. Defaults to 6 dp.
The MutableInteractionSource forwarded to each actionable chip to observe press/hover/focus interactions for the state layer. When null, each chip remembers its own. Pass a shared source to observe group-level interaction, e.g. to trigger a state update from a parent.
A composable lambda that renders a single chip. Receives the item data, a modifier (including weight when fillWidth is true), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedChip, dressed in the Stylish look with the label, color, and padding parameters above.