Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Import
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from "@retents/ui/alert-dialog"Usage Guidelines
When to use
- For critical confirmations before destructive or irreversible actions (e.g., deleting an account, discarding changes).
- When the user must make an explicit choice — the dialog cannot be dismissed by clicking the overlay or pressing Escape.
When NOT to use
- For general-purpose modals with forms or information — use Dialog instead.
- For non-blocking informational messages — use Alert (inline) or a Toast (transient).
- For every confirmation — reserve AlertDialog for truly destructive actions to avoid confirmation fatigue.
Preview
Usage
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">Delete Account</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>