Alert Dialog
Confirmation dialog for consequential actions; must be answered explicitly.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/alert-dialog.jsonUsage
Same composition as Dialog with AlertDialog*
parts. Differences: no corner X, outside clicks don't dismiss, and the popup
uses role="alertdialog".
<AlertDialog>
<AlertDialogTrigger render={<Button variant="destructive">Delete</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose render={<Button variant="outline">Cancel</Button>} />
<AlertDialogClose render={<Button variant="destructive" onClick={confirm}>Delete</Button>} />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Accessibility
role="alertdialog"tells assistive tech a decision is required.- Escape still cancels (never trap users), but accidental outside clicks won't.
- Put the safe action first in reading order and give the destructive button a verb, not "OK".