Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Ideal for confirmations and destructive actions.

View Source

#Installation

npx @dinachi/cli@latest add alert-dialog

#Usage

tsx

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogViewport,
  AlertDialogPopup,
  AlertDialogBackdrop,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from '@/components/ui/alert-dialog'

#Examples

#API Reference

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the alert dialog.
defaultOpen	boolean	false	The initial open state for uncontrolled usage.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
AlertDialogPopup.initialFocus	boolean \| RefObject \| function	—	Element to focus when the dialog opens.
AlertDialogPopup.finalFocus	boolean \| RefObject \| function	—	Element to focus when the dialog closes.