127 Components
Morphing Action Button
ButtonsMulti-phase stateful pill button that morphs its bounding width across Idle, Compiling, and Published states using spring layout projection.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/morphing-action-button.json"
Props
TypeScript props supported by <MorphingActionButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| idleLabel | string | "Publish Registry" | Button text rendered in the resting idle state. |
| loadingLabel | string | "Compiling..." | Button text rendered during the async loading phase. |
| successLabel | string | "Published v2.4" | Button text rendered when the action succeeds. |
| stiffness | number | 380 | Spring stiffness coefficient for pill width projection. |
| damping | number | 26 | Spring damping coefficient for pill width projection. |
| simulateError | boolean | — | Whether clicking triggers simulated error state for UI verification |
Key Features
- Seamless bounding-width interpolation between Idle, Loading, Success, and Error states via Framer Motion layout.
- Directional vertical label swap powered by AnimatePresence mode='popLayout'.
- Optional harmonic error shake state.
Keyboard & Accessibility
- Uses aria-live='polite' so screen readers announce state transitions as they occur.
- Preserves keyboard focus across all state transitions.
- Disables width spring oscillation and horizontal shake when prefers-reduced-motion is enabled.