Multi Step Button

Component multi-step-button-demo not found in registry.

Installation

Usage

import MultiStepButton from "@/components/ruixen/multi-step-button";
 
export default function App() {
  const handleStepChange = (event) => {
    console.log("Button clicked:", event.target.textContent);
  };
 
  return (
    <div className="space-y-4">
      {/* Wizard steps */}
      <MultiStepButton
        steps={["Start Setup", "Configure", "Review", "Complete"]}
        onClick={handleStepChange}
        size="md"
      />
 
      {/* Process states */}
      <MultiStepButton
        steps={["Draft", "Review", "Approved", "Published"]}
        onClick={handleStepChange}
        size="sm"
        className="bg-green-500 hover:bg-green-600"
      />
 
      {/* Game states */}
      <MultiStepButton
        steps={["Ready", "Playing", "Paused", "Game Over"]}
        onClick={handleStepChange}
        size="lg"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`steps`	`string[]`	-	Array of step labels
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`className`	`string`	-	Additional CSS classes
`onClick`	`(event: React.MouseEvent) => void`	-	Click handler function

Features

Sequential Steps: Cycles through steps in order
Final State: Stops at last step (doesn't loop back)
Visual Feedback: Button text changes with each click
Size Variants: Small, medium, and large sizes
Custom Styling: Supports additional CSS classes
Event Handling: Passes click event to handler

Step Progression

Initial State: Shows first step label
Click Progression: Each click advances to next step
Final State: Reaches last step and stops
No Reset: Button stays on final step

Size Variants

// Small button
<MultiStepButton size="sm" steps={["Start", "Process", "Done"]} />
 
// Medium button (default)
<MultiStepButton size="md" steps={["Begin", "Working", "Complete"]} />
 
// Large button
<MultiStepButton size="lg" steps={["Initialize", "Execute", "Finish"]} />

Common Step Patterns

Wizard Flow

const wizardSteps = [
  "Start Wizard",
  "Enter Details",
  "Review Settings",
  "Confirm & Save",
];

Document Workflow

const documentSteps = ["Draft", "Under Review", "Approved", "Published"];

Game States

const gameSteps = ["Ready to Play", "Game Started", "Game Paused", "Game Over"];

Installation Process

const installSteps = ["Download", "Installing", "Configuring", "Complete"];

Use Cases

Perfect for:

Setup Wizards: Multi-step configuration processes
Workflow States: Document approval workflows
Game Controls: Game state progression
Installation: Software installation steps
Tutorial Steps: Guided tutorial progression