Sheet 06 · Components
Dialogs
An optional alert dialog for actions that need a sentence of explanation.
Fig. 04
Await log waiting for you to try it
Installation
Usage
<ConfirmDialog title="Leave the Design team?" description="An admin can add you back later." confirmLabel="Leave team" variant="destructive" onConfirm={leaveTeam}> <Button variant="outline">Leave team</Button></ConfirmDialog>const { confirm, dialog } = useConfirm()async function discard() { if (await confirm({ title: "Discard this draft?" })) deleteDraft()}Props
ConfirmDialog
| Name | Type | Default |
|---|---|---|
| title | string | required |
| onConfirm | () => void | Promise<unknown> | required |
| children | ReactElement (trigger) | required |
| onCancel | () => void | — |
| description | ReactNode | — |
| cancelLabel | string | "Cancel" |
| confirmLabel | string | "Confirm" |
| variant | Button variant | "default" |
| gesture | "click" | "click-again" | "hold" | "click" |
| phrase | string | — |
| acknowledgements | string[] | — |
- title
- string
- Default: required
- onConfirm
- () => void | Promise<unknown>
- Default: required
- children
- ReactElement (trigger)
- Default: required
- onCancel
- () => void
- Default: —
- description
- ReactNode
- Default: —
- cancelLabel
- string
- Default: "Cancel"
- confirmLabel
- string
- Default: "Confirm"
- variant
- Button variant
- Default: "default"
- gesture
- "click" | "click-again" | "hold"
- Default: "click"
- phrase
- string
- Default: —
- acknowledgements
- string[]
- Default: —
useConfirm()
| Name | Type | Default |
|---|---|---|
| returns | { confirm, dialog } | — |
| confirm(options) | ConfirmDialog props, minus children and onCancel | — |
| options.onConfirm | () => void | Promise<unknown> | — |
| confirm() resolves | Promise<boolean> | — |
- returns
- { confirm, dialog }
- Default: —
- confirm(options)
- ConfirmDialog props, minus children and onCancel
- Default: —
- options.onConfirm
- () => void | Promise<unknown>
- Default: —
- confirm() resolves
- Promise<boolean>
- Default: —
When to use it
Use it when
- Leaving a team or removing someone else's access.
- The consequence takes a sentence to explain.
- You need to await the answer inside a handler, with useConfirm.
Reach for something else when
- It's routine and reversibleUndo →
- One extra click is warning enoughClick again →
- It deletes something large for goodType to confirm →