# MultiState Morph Button

> The Multi-State Morphing Button is a highly interactive and practical component built with shadcn UI. Unlike a standard submit button, it provides clear visual feedback for multiple states—idle, loading, success, and error—making it ideal for real-world applications like forms, payments, or approvals. The button morphs smoothly between shapes, transitioning from a rectangle to a circle on success or error, while animated icons and spinners indicate the current state. Fully configurable in terms of colors, labels, and size, it enhances user experience by giving immediate, intuitive feedback, all while maintaining a clean, modern, and reusable design.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: react-icons, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/multi-state-morph-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/multi-state-morph-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt