Components/Alert Dialog

Alert Dialog

Modal dialog that interrupts the user with important content and expects a response. Use it for destructive or irreversible actions.

Installation

npx ajaxui add alert-dialog

Notes

Anatomy

<AlertDialog>                // open state owner
  <AlertDialogTrigger asChild/>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle/>
      <AlertDialogDescription/>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel/>     // user dismisses
      <AlertDialogAction/>     // confirms the destructive op
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	—
onOpenChange	(open: boolean) => void	—	—