Sheet 04 · Components
Click again
The first click arms the button and the second one confirms.
Fig. 02
Await log waiting for you to try it
Installation
Usage
<ConfirmButton gesture="click-again" onConfirm={archive}> Archive</ConfirmButton>Props
| Name | Type | Default |
|---|---|---|
| onConfirm | () => void | Promise<unknown> | required |
| gesture | "click" | "click-again" | "hold" | "click" |
| confirmLabel | ReactNode | "Click again to confirm" |
| announcements.armed | string | confirmLabel when it's a string |
| timeout | number | 3000 |
| onCancel | () => void | — |
| undo | boolean | number | — |
| ...props | Button props | — |
| data-state | "idle" | "armed" | "holding" | "undo" | "pending" | "idle" |
- onConfirm
- () => void | Promise<unknown>
- Default: required
- gesture
- "click" | "click-again" | "hold"
- Default: "click"
- confirmLabel
- ReactNode
- Default: "Click again to confirm"
- announcements.armed
- string
- Default: confirmLabel when it's a string
- timeout
- number
- Default: 3000
- onCancel
- () => void
- Default: —
- undo
- boolean | number
- Default: —
- ...props
- Button props
- Default: —
- data-state
- "idle" | "armed" | "holding" | "undo" | "pending"
- Default: "idle"
When to use it
Use it when
- Archiving one message or removing one row.
- Space is tight and a dialog would be too much.
- Keyboard users need the same quick path as mouse users.
Reach for something else when
- It's easy to reverseUndo →
- A stray tap on a phone would be costlyHold →
- It can't be undoneType to confirm →