Sheet 07 · Components
Type to confirm
An inline form that unlocks only after the exact phrase is typed.
Fig. 05
Await log waiting for you to try it
Installation
Usage
<TypeToConfirm phrase="acme-prod" acknowledgements={["I understand active deployments will go offline."]} confirmLabel="Delete project" onConfirm={deleteProject}/>Props
| Name | Type | Default |
|---|---|---|
| phrase | string | required |
| label | ReactNode | "Type {phrase} to confirm" |
| announcements.match | string | "Phrase matches" |
| announcements.undo | string | "Done. Undo is available." |
| pauseUndoOnHover | boolean | true |
| pauseUndoOnFocus | boolean | true |
| onConfirm | () => void | Promise<unknown> | required |
| onCancel | () => void | — |
| undo | boolean | number | — |
| confirmLabel | string | "Confirm" |
| undoLabel | string | "Undo" |
| variant | Button variant | "destructive" |
| acknowledgements | string[] | [] |
| renderActions | (confirmButton) => ReactNode | — |
| className | string | — |
| data-state | "idle" | "armed" | "holding" | "undo" | "pending" | "idle" |
- phrase
- string
- Default: required
- label
- ReactNode
- Default: "Type {phrase} to confirm"
- announcements.match
- string
- Default: "Phrase matches"
- announcements.undo
- string
- Default: "Done. Undo is available."
- pauseUndoOnHover
- boolean
- Default: true
- pauseUndoOnFocus
- boolean
- Default: true
- onConfirm
- () => void | Promise<unknown>
- Default: required
- onCancel
- () => void
- Default: —
- undo
- boolean | number
- Default: —
- confirmLabel
- string
- Default: "Confirm"
- undoLabel
- string
- Default: "Undo"
- variant
- Button variant
- Default: "destructive"
- acknowledgements
- string[]
- Default: []
- renderActions
- (confirmButton) => ReactNode
- Default: —
- className
- string
- Default: —
- data-state
- "idle" | "armed" | "holding" | "undo" | "pending"
- Default: "idle"
When to use it
Use it when
- Deleting a project, a database or an account.
- Nothing, including support, can bring the data back.
- People must read the name to be sure it's the right one.
Reach for something else when
- You keep a copy for a whileUndo →
- It's one small itemClick again →
- A sentence of warning is enoughDialogs →