Stateful Button

Pro

Button that shows its own progress and result. It draws a check on success and can settle on a short summary like “Order placed”, or flickers once if something goes wrong.

Preview

Installation

npx @lumioui/cli add pro/stateful-button

Usage

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

Examples

Auto

A coffee pickup checkout.

Controlled

The parent owns the state machine via `state`: a transfer that confirms after a server round-trip, with the status line under the button reading the same state.

Error

A transit-card top-up whose payment is declined: the async press rejects, the button drains its light and flickers into "Card declined", and the card row underneath picks up an inline error.

Variants

An event page's action pair: tinted for the main ask (join the waitlist), outline for the quieter one (add to calendar).

API reference

Prop Type Default
children* string

Label text (idle state).

 —
state ButtonState

Current state — drive it from your async handler, or let the button track it.

 —
onPress
(e: GestureResponderEvent) => void … (e: GestureResponderEvent) => void | Promise<unknown>

Called on press; return a promise and the button tracks idle → loading → success/error automatically.

 —
loadingLabel string

Label shown while loading. Default: "Loading".

 "Loading"
successLabel string

Label shown on success. Default: "Done".

 "Done"
errorLabel string

Label shown on error. Default: original label.

 —
variant
"default" | "destructive" +2 "default" | "destructive" | "outline" | "tinted"

Visual style.

 "default"
size "sm" | "md" | "lg"

Size preset.

 "md"
resolvedLabel string

After the success hold (700ms) the label settles on this evidence, e.g. "Order placed · ready 8:42". Default: keeps successLabel.

 —
resetAfter number

Auto-reset to idle after success. Default 0 — the button keeps its result; pass a duration (ms) to return to idle.

 0
className string

Extra classes for the container.

 —
textClassName string —