Stylish
A grid of connected selectable chips laid out in equal-width cells across a fixed number of columns, with animated selection-state color transitions — suited for tag clouds, category pickers, or multi-select filter grids.
This is the Finish-layer component: it supplies the Stylish chip rendering (DefaultStylishConnectedChip) to the headless Structure layout ConnectedChipGrid, which owns arrangement and connection geometry. Items are chunked into rows of columns chips; within each row every chip receives equal weight and stretches to the tallest sibling. Outline edges are drawn on all four sides of every cell; corner radii are computed automatically from each item's absolute index so that only the four outer corners of the entire grid are rounded. 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 number of equal-width columns in the grid. Must be greater than zero.
The gap between adjacent chips both horizontally and vertically. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
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 and fill-max-height), 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.