# Stateful Button

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.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/stateful-button
```

## Import

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

## Variants

- `auto` — Auto: `npx @lumioui/cli add pro/stateful-button-auto`
- `controlled` — Controlled: `npx @lumioui/cli add pro/stateful-button-controlled`
- `error` — Error: `npx @lumioui/cli add pro/stateful-button-error`
- `variants` — Variants: `npx @lumioui/cli add pro/stateful-button-variants`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `state?` | `ButtonState` | Current state — drive it from your async handler, or let the button track it. |
| `onPress?` | `(e: GestureResponderEvent) => void | Promise<unknown>` | Called on press; return a promise and the button tracks idle → loading → success/error automatically. |
| `children` | `string` | Label text (idle state). |
| `loadingLabel?` | `string` | Label shown while loading. Default: "Loading". |
| `successLabel?` | `string` | Label shown on success. Default: "Done". |
| `errorLabel?` | `string` | Label shown on error. Default: original label. |
| `variant?` | `"default" | "destructive" | "outline" | "tinted"` | Visual style. |
| `size?` | `"sm" | "md" | "lg"` | Size preset. |
| `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. |
| `className?` | `string` | Extra classes for the container. |
| `textClassName?` | `string` | — |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/stateful-button