Button Stateful

Installation

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

Usage

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

<StatefulButton state={state} onClick={save} successText="Saved">
  Save
</StatefulButton>

Examples

States

Use for async actions like saving, where the reader needs to see the result.

Variants

Without Tint

Sizes

Accessibility

While loading the button is disabled but stays focusable (focusableWhenDisabled) and sets aria-busy. The current label is announced through a polite live region.

Motion

With reduced motion the faces cross-fade and the width changes instantly.

API Reference

StatefulButton

A Button that swaps between idle, loading, success and error faces. Also accepts every prop of Button.

state= "idle": "idle" | "loading" | "success" | "error"; Which face the button shows. idle shows the children and icon; loading disables it (it stays focusable).
children*: ReactNode; Idle label.
loadingText= "Working": ReactNode; Label while loading, after a spinner.
successText= "Done": ReactNode; Label on success, after a check.
errorText= "Try again": ReactNode; Label on error, after a cross.
icon: ReactNode; Trailing icon shown only while idle.
tint= true: boolean; Tint the surface green / red on success / error (default variant only).
variant= "default": Button variant; Passed to Button.

Prop	Type	Default	Description
state	"idle" \| "loading" \| "success" \| "error"	"idle"	Which face the button shows. `idle` shows the children and `icon`; `loading` disables it (it stays focusable).
children*	ReactNode	—	Idle label.
loadingText	ReactNode	"Working"	Label while loading, after a spinner.
successText	ReactNode	"Done"	Label on success, after a check.
errorText	ReactNode	"Try again"	Label on error, after a cross.
icon	ReactNode	—	Trailing icon shown only while idle.
tint	boolean	true	Tint the surface green / red on success / error (`default` variant only).
variant	Button variant	"default"	Passed to Button.

data-state: The current state.

Data attribute	Description
data-state	The current `state`.