Parameters
The button's colour while idle and loading. Its text and marks are white.
The colour the button turns once it is done.
The colour the button turns when something went wrong.
The button's height; it grows with larger text.
The radius of the corners. Half the height or more makes a pill, and the corners ease to a circle whenever the button shrinks.
A spinner, or the button keeping its width and filling with a percentage. In the Preview, the fill is simulated over the length of the loading; in an app, pass progress.
Whether the button shrinks to a circle around the spinner while loading; off, it keeps a pill with the loading words beside the spinner.
How much the width overshoots and settles as the button springs from one state to the next.
What the idle button says.
Loading Preview…
Send to your coding agent
Add Sheen's MCP server once, then paste the prompt. No key or account needed.
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Use the Sheen MCP server to add the State Button Component to this Flutter app. Call get_export with componentId "state-button" and parameters {"color":"6C4FFF","successColor":"15803D","errorColor":"B91C1C","height":52,"cornerRadius":26,"loadingStyle":"spinner","shrinkToCircle":true,"bounciness":0.4,"label":"Generate"}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/state-button?color=6C4FFF&successColor=15803D&errorColor=B91C1C&height=52&cornerRadius=26&loadingStyle=spinner&shrinkToCircle=true&bounciness=0.4&label=Generate)