Alert Dialog With Icon

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 AlertDialogWithIcon() {
16  return (
17    <AlertDialog>
18      <AlertDialogTrigger asChild>
19        <Button variant="outline">Show Dialog</Button>
20      </AlertDialogTrigger>
21      <AlertDialogContent>
22        <AlertDialogHeader>
23          <AlertDialogTitle>
24            <div className="mx-auto mb-4 flex h-9 w-9 items-center justify-center rounded-full bg-destructive/10 sm:mx-0">
25              <OctagonAlert className="h-5 w-5 text-destructive" />
26            </div>
27            Are you absolutely sure?
28          </AlertDialogTitle>
29          <AlertDialogDescription className="text-[15px]">
30            This action cannot be undone. This will permanently delete your
31            account and remove your data from our servers.
32          </AlertDialogDescription>
33        </AlertDialogHeader>
34        <AlertDialogFooter>
35          <AlertDialogCancel>Cancel</AlertDialogCancel>
36          <AlertDialogAction>Continue</AlertDialogAction>
37        </AlertDialogFooter>
38      </AlertDialogContent>
39    </AlertDialog>
40  );
41}