Loading Button

Buttons 599

About

A button that morphs its label through pending, success, and error states without layout shift when running an async action.

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

Code

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

Usage.tsx

import { LoadingButton } from "@/components/ui/loading-button";

export default function LoadingButtonDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <LoadingButton
        onAction={() => new Promise((resolve) => setTimeout(resolve, 1600))}
        pendingLabel="Publishing…"
        successLabel="Published"
        errorLabel="Try again"
      >
        Publish
      </LoadingButton>
    </div>
  );
}