Haedong
029

Alert Dialog

Overlay

No decision yet

Customize

Tone

Code

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogTitle>Discard changes?</AlertDialogTitle>
  <AlertDialogDescription>The draft goes back to the last saved version.</AlertDialogDescription>
  <AlertDialogFooter>
    <AlertDialogCancel />
    <AlertDialogAction onClick={confirm}>Discard</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialog>

Install

npx shadcn@latest add https://components.haedong.dev/r/alert-dialog.json

Props

Same surface and backdrop as Dialog. AlertDialogCancel and AlertDialogAction are Buttons (ghost / solid) that close after your onClick; put Cancel first so it receives focus.

PropTypeDescription
open / onOpenChangeboolean / (open) => voidControlled visibility. Esc and both buttons call onOpenChange(false); the backdrop does not.
tone"warning" | "error"Title prefix ? or !; error also turns the hairline dashed. Defaults to "warning".
AlertDialogCancelButtonPropsGhost button, label defaults to "Cancel".
AlertDialogActionButtonPropsSolid button; the decision.