Status Button
One promise-driven button that walks idle, loading with a spinner, success with a drawn tick and error with a shake and retry, without changing width.
Preview
Display name
Ines Moreau
Handle
@ines
Last saved 3 min ago
StatesSavedFailed.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onAction | () => unknown | — | Runs on click. A promise drives loading → success or error; a sync return is success. |
| loadingLabel / successLabel / errorLabel | ReactNode | "Saving…" / "Saved" / "Retry" | Labels per state. Clicking the error state retries. |
| variant | "primary" | "secondary" | "primary" | The lit key, or a raised card button. |
| size | "sm" | "md" | "lg" | "md" | 32, 36 or 40 px tall. |
| resetAfter | number | 2000 | Ms before success returns to idle. 0 stays. Errors wait for a retry. |
| status / onStatusChange | "idle" | "loading" | "success" | "error" | — | Controlled status. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.