Inline Confirm Button
A destructive button that expands in place into a question with Cancel and a danger-key confirm, focusing the safe option, with Escape, a timeout, a working state and a done state.
Preview
3 files selected
- brief-v3.pdf
- moodboard.fig
- notes-old.md
States
Rest
Asking
Delete 3 files?
Delete 3 files?Working
Delete 3 files?
Deleting…Done
3 files deleted
3 files deletedSmall
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Resting label. Required. |
| question | string | — | Asked in place, e.g. “Delete 3 files?”. Required. |
| icon | ReactNode | trash | Resting icon. |
| confirmLabel / cancelLabel | string | "Delete" / "Cancel" | The two answers; Cancel gets focus. |
| workingLabel / doneLabel | string | "Deleting…" / "Deleted" | While onConfirm runs, and after it succeeds. |
| onConfirm | () => void | Promise<unknown> | — | A promise shows the working state; a rejection shows its message. |
| onCancel | () => void | — | Cancel or Escape. |
| timeout / doneDuration | number | 6000 / 2200 | Ms before an unanswered ask, or the done state, returns to rest; 0 holds. |
| defaultPhase | "rest" | "confirm" | "working" | "done" | "rest" | Start in a phase (static previews). |
| size | "sm" | "md" | "md" | 32 or 36 px tall. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.