Stateful Button

Communicate async loading, success, and error states without leaving the button.

Example

Read the complete implementation guide to learn how the component models a shadcn loading button with success and error states, prevents rapid duplicate actions, announces status, and handles reduced motion.

Features

• Reports loading, success, and error states for any asynchronous action.
• Animates label changes character by character.
• Announces status changes and reduces motion when requested.

Installation

pnpm dlx shadcn@latest add @tentui/stateful-button

Usage

import { StatefulButton } from "@/components/stateful-button";

<StatefulButton
  labels={{ loading: "Saving", success: "Saved" }}
  onClick={async () => {
    await saveChanges();
  }}
>
  Save changes
</StatefulButton>

Accessibility

The button disables itself while an action is running and announces loading, success, and error labels through a polite live region. Reduced-motion preferences remove transforms and stop the loading icon's rotation.

API reference

Examples

Custom labels

<StatefulButton
  labels={{
    loading: "Publishing",
    success: "Published",
    error: "Try again",
  }}
  onClick={async () => {
    await publishChanges();
  }}
>
  Publish
</StatefulButton>