Playground · Buttons & controls

Split Button

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

Material 3 Expressive's split button: a primary action joined to a chevron whose corners spring rounder under your thumb, opening a menu that unfolds on a spring with its items cascading in.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 Adds moreOptionsLabel, the name a screen reader gives the chevron, so it can be translated. Accessibility: the keyboard can focus both segments and the menu items (with focus rings), Enter or Space activates them, an opened menu takes the focus and Esc closes it and returns it to the chevron, and both segments take a touch over at least 48 by 48. The default colour is a slightly deeper violet (6C4FFF, was 7C5CFF) so white text on it reaches 4.5:1.
  • 1.0.1 2026-10-03 Given more width than it needs, the menu lines up with the chevron and the chevron closes it; a menu too tall for the screen stays on it and scrolls; disabling onMenuItem closes the menu, keeps it closed and reports it through onOpenChanged. The open default stays true for the Preview, so pass open: false in an app.
  • 1.0.0 2026-10-03 First release.

Parameters

The icon before the label, or none for the label on its own.

How many items the menu holds: the first ones of the four below.

Whether the menu starts open. On by default so the Preview shows the menu; in an app, pass open: false. After a tap the button keeps its own state, and follows this again only when it changes.

The fill of both segments.

The label, the icon and the chevron.

The menu's fill. Its text turns near-white or near-black, whichever reads better on it.

The button's height in logical pixels; the label, icon and padding scale with it. 40 is Material's small split button, 56 its medium one.

How much the corners and the menu overshoot and wobble as they settle. 0 settles without overshoot.

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 Split Button Component to this Flutter app. Call get_export with componentId "split-button" and parameters {"label":"Send","icon":"send","menuCount":4,"menuLabel1":"Schedule send","menuLabel2":"Send without sound","menuLabel3":"Save as draft","menuLabel4":"Discard","open":true,"color":"6C4FFF","textColor":"FFFFFF","menuColor":"26262E","height":56,"bounciness":0.5}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/split-button?label=Send&icon=send&menuCount=4&menuLabel1=Schedule+send&menuLabel2=Send+without+sound&menuLabel3=Save+as+draft&menuLabel4=Discard&open=true&color=6C4FFF&textColor=FFFFFF&menuColor=26262E&height=56&bounciness=0.5)