Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA two-press button for a small risky action: the first press arms it, the second runs it, and it disarms on timeout, blur and Escape.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it where a full dialog is too heavy but a single click is too easy: revoking a token, removing a member from a list, resetting a draft.
Do not use it for irreversible, high-cost actions (use confirm-destructive-action) or for actions that can be undone with a toast.
It builds on button, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label while idle. |
confirmLabel | string | Click again to confirm | Label while armed. |
onConfirm | () => void | - | Runs on the second press. |
timeout | number | 4000 | Milliseconds before it disarms. |
variant | Button variant | outline | Idle style. The armed style is destructive. |
data-armed, not by colour alone.timeout ms, so it cannot stay armed unnoticed.| Key | Action |
|---|---|
| Enter / Space | arm, then confirm |
| Escape | disarm |
| Tab away | disarms |
The component ships a Testing Library test (confirm-button.test.tsx) that covers arming and confirming, the announcement, Escape and blur and the timeout.