A confirmation alert dialog for destructive or irreversible actions, built on Base UI with a 3D perspective blur entrance/exit animation, optional media icon slot, and a compact size variant.
"use client";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/base-alert-dialog";
import { useState } from "react";
import { Button } from "@/components/ui/base-alert-dialog-utils/button";
export default function AlertDialogSmallDemo() {
const [open, setOpen] = useState(false);
return (
<div className="flex items-center justify-center p-4">
<AlertDialog onOpenChange={setOpen} open={open}>
<AlertDialogTrigger
render={<Button variant="outline">Discard Changes</Button>}
/>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle>Discard unsaved draft?</AlertDialogTitle>
<AlertDialogDescription>
All unsaved changes will be permanently discarded.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Keep editing</AlertDialogCancel>
<AlertDialogAction
closeOnClick
onClick={() => setOpen(false)}
variant="destructive"
>
Discard
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}
