Alert Dialog
A question that has to be answered.
Default
Two ways out, and both of them are decisions.
A dialog the reader cannot wave away: no corner cross, and clicking the darkened page does nothing. Keep it for what cannot be undone — deleting, publishing, paying — and use a plain Dialog for everything else.
Installation
npx philcn@latest add alert-dialogThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| AlertDialog.open | boolean | Controlled: whether it is showing. |
| AlertDialog.defaultOpen | boolean | Uncontrolled: whether it starts open. |
| AlertDialog.onOpenChange | ((open: boolean) => void) | Called when it opens or closes. |
| AlertDialogContent.onEscapeKeyDown | ((event: KeyboardEvent) => void) | Escape still closes it. Call preventDefault here if even that should be a decision. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- The cancel button takes focus when it opens, not the destructive one: a reader hitting Enter out of habit should keep their data.
- Name the action after what it does — Delete, Publish — rather than OK. A reader reads the button, not the paragraph.