Alert dialog
A confirmation that interrupts on purpose. Use it before something that is hard to undo; focus starts on Cancel so a stray Enter does no harm.
bunx --bun shadcn@4.17.0 add @waimakers/alert-dialog- npm dependencies
- @base-ui/react@1.9.0
From the registry
A confirmation modal. Initial focus lands on Cancel regardless of action order, unless initialFocus is supplied. Actions remain ordinary buttons so an asynchronous operation can keep the dialog open. Destructive confirmations name the consequence in their title or description.
Examples
Destructive confirm
Name what will happen and to what. The destructive action sits last, and Cancel holds the first focus.
Small
The small size suits a one-line question, such as discarding a draft.
Pending
The action shows its loading state and the dialog stays open until the request settles, so a failure can say so in place.
States
A disabled trigger, and a focused one with the shared ring.