Morph Button
Overview
An async button that morphs between idle, loading, success, and error states.
This action component is intended for interfaces that need an async button that morphs between idle, loading, success, and error states, SaaS workflows, and onboarding flows. Its implementation is provided as editable source so the final behavior and styling stay inside your project.
Technologies
Detected package dependencies: framer-motion.
Click to run the full idle → loading → success cycle
Installation
Usage
import { MorphButton } from "@/components/spectrumui/morph-button"<MorphButton onAction={() => saveChanges()}>Save changes</MorphButton>API Reference
MorphButton
Renders a single button element driven by a MorphButtonState — "idle" | "loading" | "success" | "error". Pass onAction to let the button run the full cycle itself, or pass state to drive it from outside (the internal machine is bypassed and onClick still fires). While not idle the button is aria-disabled and ignores clicks, and a polite live region announces each state change.
| Prop | Type | Default | Description |
|---|---|---|---|
*children | React.ReactNode | - | Idle content of the button — usually a short action label |
onAction | () => Promise<void> | void | - | Async work to run on click when uncontrolled. Loading while pending, success on resolve, error on throw, then auto-reset |
state | "idle" | "loading" | "success" | "error" | - | Controlled state. When provided the internal machine is bypassed |
onClick | React.MouseEventHandler<HTMLButtonElement> | - | Click handler; fires on idle clicks in both modes |
loadingLabel | string | - | Label rendered next to the spinner while loading; spinner-only if omitted |
successLabel | string | "Done" | Label shown next to the check in the success state |
errorLabel | string | "Failed" | Label shown next to the X in the error state |
resetDelay | number | 1800 | Milliseconds success/error is held before auto-resetting to idle |
size | "sm" | "md" | "lg" | "md" | Visual size of the button |
disabled | boolean | false | Disables pointer and keyboard interaction |
className | string | - | Additional classes merged with the default button styles |
Examples
Error state and sizes
The first action always rejects — error state with a tight shake
Use cases
- interfaces that need an async button that morphs between idle, loading, success, and error states
- SaaS workflows
- onboarding flows
Features
- Copy-paste source that remains in your repository
- TypeScript source included with the component
- Tailwind CSS classes editable in the component source
- Animation implemented with Motion
- Responsive Tailwind variants present in the source
- Reduced-motion handling present in the source
Accessibility
- The source includes ARIA attributes or roles; preserve them when customizing the component.
- The source checks reduced-motion preferences or includes motion-reduce styles.
- Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.
Customization
- Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
- Use the documented className surface for local layout adjustments, then edit the source for structural changes.
- Adjust Motion transitions in the source and keep the reduced-motion behavior aligned with the final interaction.
Related components
Topic guides
See how this component fits into broader interface patterns, implementation decisions, and working examples.
Morph Button FAQ
Is Morph Button free to use in commercial projects?
Yes. The public Morph Button source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.
How do I install Morph Button?
Run npx shadcn@latest add @spectrumui/morph-button. The page also exposes the source for manual installation.
Does Morph Button require Motion?
Yes. Motion usage was detected in the documented source or registry dependencies for Morph Button.
Does Morph Button use shadcn/ui or Radix UI?
No shadcn/ui or Radix UI dependency was detected in the documented Morph Button source.
Can I use Morph Button in Next.js?
The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.
What accessibility checks should I run for Morph Button?
The source includes ARIA markup, reduced-motion handling. Test the finished interface with keyboard and screen-reader workflows.