Multi State Morph Button

Component multi-state-morph-button-demo not found in registry.

Installation

Usage

import MultiStateMorphButton from "@/components/ruixen/multi-state-morph-button";
 
export default function App() {
  const handleSubmit = async () => {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000));
    // Throw error to test error state: throw new Error("Failed");
  };
 
  return (
    <MultiStateMorphButton
      label="Submit Form"
      onClick={handleSubmit}
      width={200}
      height={50}
      colors={{
        idle: "#3b82f6",
        loading: "#2563eb",
        success: "#16a34a",
        error: "#dc2626",
      }}
    />
  );
}

Props

Prop	Type	Default	Description
`label`	`string`	`"Submit"`	Button text in idle state
`onClick`	`() => Promise<void> \| void`	-	Click handler function
`className`	`string`	-	Additional CSS classes
`width`	`number`	`200`	Button width in pixels
`height`	`number`	`50`	Button height in pixels
`colors`	`StateColors`	Default colors	Custom colors for each state

Features

Four States: Idle, loading, success, and error
Smooth Morphing: Animated transitions between states
Custom Colors: Configurable colors for each state
Auto Reset: Returns to idle after success/error
Loading Protection: Prevents multiple clicks during loading
Icon Animations: Animated icons for success/error states

State Colors

interface StateColors {
  idle?: string; // Default: "#3b82f6"
  loading?: string; // Default: "#2563eb"
  success?: string; // Default: "#16a34a"
  error?: string; // Default: "#dc2626"
}

Button States

Idle: Shows label text, ready for interaction
Loading: Shows spinning hourglass icon
Success: Shows checkmark icon, auto-resets after 2s
Error: Shows X icon, auto-resets after 2s