Morphing Button
A layout-stable interactive action button that smoothly transitions between Idle, Loading, Success, and Error states without jarring jumps or dimension shifts.
Maintains physical shape & size across asynchronous state morphs
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/morphing-button
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'idle' | 'loading' | 'success' | 'error' | 'idle' | Current button lifecycle state |
| idleText | string | 'Save Changes' | Label shown in default resting state |
| loadingText | string | 'Saving...' | Label shown when operation is pending |
| successText | string | 'Saved' | Label shown upon successful completion |
| errorText | string | 'Failed' | Label shown when operation fails |
| variant | 'primary' | 'secondary' | 'danger' | 'ghost' | 'primary' | Visual surface styling preset |