Skip to Content

Alert Dialog

A blocking confirmation dialog based on Radix UI AlertDialog. Unlike Dialog, it cannot be dismissed by clicking outside — the user must explicitly confirm or cancel.


Import

import { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from "@phpcreation/frontend-components-react-nextjs-bundle/components/AlertDialog";

Usage

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, } from "..."; import { Button } from "..."; <AlertDialog> <AlertDialogTrigger asChild> <Button variant="destructive">Delete Account</Button> </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. This will permanently delete your account and all associated data. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction onClick={handleDelete}> Yes, delete account </AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>

Use AlertDialog (not Dialog) for destructive or irreversible actions so users cannot accidentally dismiss it.


Last updated on