Motion UIComponentsComponent

Multi-state button

A button whose width, glyph and label morph as it moves between states.

API reference

Components

`<MultiStateButton />`

Pill button with content crossfade, width morph and optional settle feedback.

`state`

string

Current state key owned by the consumer.

`children`

ReactNode

Visible label for the current state.

`icon?`

ReactNode

Optional leading glyph for the current state.

`surfaceClassName?`

string = "bg-primary text-primary-foreground"

Surface classes for the current state.

`pillClassName?`

string = "rounded-md px-5 py-3 text-sm font-medium"

Constant pill styling in every state.

`feedback?`

MultiStateFeedback = "none"

Feedback fired when state settles.

`widthMorph?`

boolean = true

Whether the pill animates width via layout projection.

`announce?`

string

Accessible status text via internal aria-live.

`"aria-label"?`

string

Accessible button name.

`type?`

"button" | "submit" = "button"

Button type. Default "button".

`disabled?`

boolean

Disables the button.

`onClick?`

() => void

Click handler.

`className?`

string

Merged onto the button root.

Featured in

See the multi-state button composed into full sections.

CTA: Signup with celebrationAn example of an animated trial-signup call-to-action with idle, loading and success states and an accent-coloured confetti celebration, in Motion for React.

Footer: NewsletterAn example of an animated site footer with a newsletter subscribe form, quiet link-column hovers and inline state feedback in Motion for React.