Confirm Dialog
ui / feedback
Controlled confirmation dialog with an awaited action, destructive styling and optional typed confirmation.
- type
- ui
- files
- 1
- registry deps
- alert-dialog, input, label
- npm deps
- lucide-react
installs
- components/ui/confirm-dialog.tsx
- Awaited action: stays open and busy, shows failures in place
- Cannot be dismissed mid-flight
- Optional typed confirmation for irreversible actions
onConfirm is awaited: the dialog stays open and refuses to dismiss while the action is in flight, and shows the failure in place if it throws. Set requireText for anything irreversible.
Variations
one state per section
Standard confirmation
The action is awaited: the dialog stays open and busy, and refuses to dismiss while it runs.
Destructive action
Red confirm button for anything that removes data. Same mechanics, different weight.
Typed confirmation
For irreversible deletions: the confirm button stays disabled until the exact name is typed. Enter submits once it matches.
Action failed
A rejected promise renders inside the dialog and leaves it open, so the user can retry or cancel — not a toast that outlives the context.