Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/multi-state-morph-button"use client"
import MultiStateMorphButton from "@/components/ui/multi-state-morph-button"
export default function MultiStateMorphButtonDemo() {
const simulateAction = () => {
return new Promise<void>((resolve, reject) => {
setTimeout(() => {
Math.random() > 0.5 ? resolve() : reject()
}, 1500)
})
}
return (
<div className="p-6 flex flex-col gap-6">
<MultiStateMorphButton label="Submit" onClick={simulateAction} />
<MultiStateMorphButton
label="Save"
width={200}
height={50}
onClick={simulateAction}
colors={{
idle: "#64748b",
loading: "#475569",
success: "#10b981",
error: "#ef4444",
}}
/>
</div>
)
}