Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Unlike a regular dialog, an alert dialog requires explicit acknowledgement before it can be dismissed.

Basic

A simple confirmation dialog with cancel and continue actions. The dialog closes automatically when either action is clicked.

Destructive

Use buttonVariants({ variant: "destructive" }) on the AlertDialogAction to indicate a destructive operation like deleting a project.

Usage

tsx

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@rogo-technologies/ui/alert-dialog";

Controlled

Control the dialog programmatically with open and onOpenChange:

tsx

const [open, setOpen] = useState(false);

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirm</AlertDialogTitle>
      <AlertDialogDescription>Are you sure?</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleConfirm}>Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Alert Dialog vs Dialog

Feature	Dialog	Alert Dialog
Backdrop click	Closes dialog	Requires explicit action
Escape key	Closes dialog	Requires explicit action
Use case	Forms, settings, content	Confirmations, warnings, destructive actions

PreviousMr Rogo

NextAvatar