Status Button

Features

• Works from an async click handler, or follows a status you control from form state.
• Keeps focus while busy, so keyboard focus is not lost when the action finishes.
• Announces loading and success to screen readers.
• Swaps states without motion when reduced motion is preferred.

Installation

pnpm dlx shadcn@latest add @ncdai/status-button

Usage

import { StatusButton } from "@/components/status-button"

<StatusButton onClick={save} successLabel="Saved">
  Save
</StatusButton>

Return a promise from onClick. The button shows a spinner while the promise is pending, then the success label, then returns to idle. If the promise rejects, the button returns to idle right away.

Controlled

When a form owns the submission, pass status and onStatusChange instead of onClick. The button still returns to idle on its own, and onStatusChange receives "idle" when that happens.

import { StatusButton, type ButtonStatus } from "@/components/status-button"
 
const [status, setStatus] = useState<ButtonStatus>("idle")

<StatusButton
  type="submit"
  status={status}
  onStatusChange={setStatus}
  successLabel="Sent"
>
  Send
</StatusButton>

API reference

StatusButton

Extends Button with loading and success states.

See shadcn/ui documentation for more information.

Examples

Form submission