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.
Related
Last updated on