Morphing Status Button
A production-ready morphing status button component for your Next.js application. Accessible, customizable, and built with modern standards.
Morphing Status Button
A smart interaction component that combines action and feedback into a single, fluid element. It seamlessly morphs between states to provide immediate visual confirmation without cluttering the UI.
Key Features
- Fluid Morphing: Uses Framer Motion's layout animations to smoothly resize the button based on content.
- Status Handling: Built-in support for loading spinners, success checkmarks, and error shakes.
- Premium Feel: Spring-based enter/exit animations for text and icons.
- Forms
- Settings Pages
- Action Panels
- Feedback Systems
| Name | Type | Default | Description |
|---|---|---|---|
| status | 'idle' | 'loading' | 'success' | 'error' | — | Current state of the button. |
| label | string | — | Text to display in idle state. |
| successLabel | string | — | Text to display in success state. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.