Playground · Buttons & controls

Connected Button Group

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

A Material 3 Expressive connected button group: two to five buttons joined by hairline gaps, whose selected buttons morph from tight inner corners to a full pill and fill with colour, and which widen on a spring while pressed as their neighbours squeeze to make room. Single- or multi-select.

Version 1.2.0 · What changed
  • 1.2.0 2026-10-06 Adds iconLabel, a function from ButtonGroupIcon to the name a screen reader gives an icon-only button, so it can be translated. Accessibility: the keyboard can focus each button (with a focus ring) and Space or Enter toggles it, and every button takes a touch over at least 48 by 48 even when it is drawn shorter. The default accent colour is a slightly deeper violet (6C4FFF, was 7C5CFF) so white text on it reaches 4.5:1.
  • 1.1.0 2026-10-03 Adds selection, a Set<int> a parent keeps in step with onChanged, so a parent can hold a multi-select selection and reset it; selected is still the starting button, and is ignored while selection is given.
  • 1.0.0 2026-10-03 First release.

Parameters

The button selected at first, counting from 0; -1 selects none. Past the last button, the last one is selected.

On, each button toggles on its own, like Bold and Italic. Off, choosing one button deselects the others, like Day, Week and Month.

An icon before the label. With an empty label, the button shows the icon alone.

The fill of the selected buttons.

The fill of the buttons that aren't selected.

The label and icon colour of the buttons that aren't selected.

The buttons' height in logical pixels; labels and icons scale with it. Large text makes it taller when it needs to.

The radius of the corners where buttons meet. The group's outer corners, and every corner of a selected button, are fully round.

How much the press and the corner morph overshoot before they settle.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Connected Button Group Component to this Flutter app. Call get_export with componentId "connected-button-group" and parameters {"buttonCount":3,"selected":0,"multiSelect":true,"label1":"Bold","icon1":"bold","label2":"Italic","icon2":"italic","label3":"Underline","icon3":"underline","label4":"List","icon4":"list","label5":"Grid","icon5":"grid","accentColor":"6C4FFF","surfaceColor":"2A2A33","textColor":"D9D9E3","selectedTextColor":"FFFFFF","height":56,"innerRadius":8,"bounciness":0.5}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/connected-button-group?buttonCount=3&selected=0&multiSelect=true&label1=Bold&icon1=bold&label2=Italic&icon2=italic&label3=Underline&icon3=underline&label4=List&icon4=list&label5=Grid&icon5=grid&accentColor=6C4FFF&surfaceColor=2A2A33&textColor=D9D9E3&selectedTextColor=FFFFFF&height=56&innerRadius=8&bounciness=0.5)