Destructive Alert Dialog

1import { OctagonAlert } from "lucide-react";
2import {
3  AlertDialog,
4  AlertDialogAction,
5  AlertDialogCancel,
6  AlertDialogContent,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogHeader,
10  AlertDialogTitle,
11  AlertDialogTrigger,
12} from "@/registry/ui/alert-dialog";
13import { Button } from "@/registry/ui/button";
14 
15export default function AlertDialogDestructive() {
16  return (
17    <AlertDialog>
18      <AlertDialogTrigger asChild>
19        <Button variant="outline">Show Dialog</Button>
20      </AlertDialogTrigger>
21      <AlertDialogContent>
22        <AlertDialogHeader>
23          <AlertDialogTitle className="w-full">
24            <div>
25              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10">
26                <OctagonAlert className="h-7 w-7 text-destructive" />
27              </div>
28              <p className="text-center">Are you absolutely sure?</p>
29            </div>
30          </AlertDialogTitle>
31          <AlertDialogDescription className="text-center text-[15px]">
32            This action cannot be undone. This will permanently delete your
33            account and remove your data from our servers.
34          </AlertDialogDescription>
35        </AlertDialogHeader>
36        <AlertDialogFooter className="mt-2 sm:justify-center">
37          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
38          <AlertDialogAction variant="destructive">Continue</AlertDialogAction>
39        </AlertDialogFooter>
40      </AlertDialogContent>
41    </AlertDialog>
42  );
43}