Progress Button

Buttons 1

About

A button that turns into its own progress bar and result state — pressed, it fills with a percentage, morphs its label through working/done/error phases, and returns to idle on its own.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress Button to your project and fits it to your theme.

Code

How Progress Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import * as Icons from "lucide-react";
import ProgressButton, {
  type ProgressButtonState,
} from "@/components/ui/progress-button";

/** Export turns into its own progress, then into "Exported", and back. */
export default function ProgressButtonDemo() {
  const [state, setState] = React.useState<ProgressButtonState>("idle");
  const [progress, setProgress] = React.useState(0);
  const timer = React.useRef<ReturnType<typeof setInterval>>();

  const start = () => {
    setState("working");
    setProgress(0);
    let current = 0;
    timer.current = setInterval(() => {
      current = Math.min(100, current + 9);
      setProgress(current);
      if (current === 100) {
        clearInterval(timer.current);
        setState("done");
      }
    }, 250);
  };

  React.useEffect(() => () => clearInterval(timer.current), []);

  return (
    <ProgressButton
      state={state}
      onStateChange={setState}
      progress={progress}
      icon={Icons.Download}
      label="Export"
      workingLabel="Exporting"
      doneLabel="Exported"
      onClick={start}
    />
  );
}