Progress Button

Component progress-button-demo not found in registry.

Installation

Usage

import ProgressButton from "@/components/ruixen/progress-button";
 
export default function App() {
  return (
    <div className="flex gap-4">
      {/* Spinner version */}
      <ProgressButton
        label="Upload File"
        loadingLabel="Uploading..."
        successLabel="Uploaded!"
        duration={3000}
      />
 
      {/* Progress bar version */}
      <ProgressButton
        label="Process Data"
        loadingLabel="Processing..."
        successLabel="Complete!"
        showBar={true}
        duration={2000}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`label`	`string`	-	Button text in idle state
`loadingLabel`	`string`	`"Processing..."`	Text shown during loading
`successLabel`	`string`	`"Done!"`	Text shown on success
`showBar`	`boolean`	`false`	Show progress bar vs spinner
`duration`	`number`	`2000`	Loading duration in ms
`className`	`string`	-	Additional CSS classes

Features

Two Display Modes: Spinner or progress bar
Three States: Idle, loading, success
Auto Reset: Returns to idle after success
Click Protection: Prevents multiple clicks during loading
Smooth Animations: CSS transitions for all states
Customizable Duration: Control loading time
Accessible: Proper disabled states and ARIA support

Display Modes

Spinner Mode (Default)

Shows a rotating loader icon during processing:

<ProgressButton
  label="Submit"
  showBar={false} // or omit (default)
/>

Progress Bar Mode

Shows a filling progress bar at the bottom:

<ProgressButton label="Upload" showBar={true} duration={3000} />

Use Cases

Perfect for:

File Uploads: Show upload progress
Form Submissions: API call feedback
Data Processing: Long-running operations
Payment Processing: Transaction feedback
Export Operations: File generation progress