Stylish
A vertically connected group of buttons that share outlines and corner radii to form a segmented-control appearance.
This is the Finish-layer component: it supplies the Stylish button rendering (DefaultStylishConnectedButton) to the headless Structure layout ConnectedButtonColumn, which owns arrangement and connection geometry. Each button fills the full available width. Outline edges and corner radii are computed automatically from each item's index. Leading and trailing slots are given a minimum width of 40 dp so that icons align consistently across rows. Items whose StylishConnectedButtonItem.onClick is null or whose StylishConnectedButtonItem.enabled is false are rendered in a disabled state and do not respond to interaction. Pass a custom button to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedButtonItem data objects that describe each button's content, click action, colors, and enabled state.
The radius applied to the outer corners of the first and last buttons. Defaults to StylishTheme.dimensions.connectedCornerRadius (12 dp).
The vertical gap between adjacent buttons. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
The inner padding of each button. Defaults to 16 dp horizontal and 12 dp vertical.
The ButtonColors used for every item whose StylishConnectedButtonItem.colors is null.
A composable lambda that renders a single button. Receives the item data, a modifier (including fill-max-width), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedButton, dressed in the Stylish look with cornerRadius, contentPadding, defaultColors, and a 40 dp slot minimum width.