Status Button

Async button with loading, success and error states

Give it an async action and it handles the rest: a spinner while pending, a drawn-in checkmark on success, a shake on failure — resizing itself to fit each label before reverting to idle.

Preview

Runs alternate between success and error.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/status-button.json

Usage

Import the component:

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

Use it in your code:

<StatusButton
  action={() => saveSettings()}
  successLabel="Saved"
  errorLabel="Failed"
>
  Save changes
</StatusButton>

Props

Property	Type	Default	Description
action	() => Promise<unknown>	—	Async work to run on click. Resolve → success, reject → error.
children	ReactNode	"Save changes"	Idle label.
successLabel	string	"Saved"	Label shown on success.
errorLabel	string	"Failed"	Label shown on error.
revertAfter	number	2000	ms before returning to idle after success or error.

Components