Customized Footer Alert Dialog

1import { ExternalLink, OctagonAlert, Trash } 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 AlertDialogWithCustomizedFooter() {
16  return (
17    <AlertDialog>
18      <AlertDialogTrigger asChild>
19        <Button variant="outline">Show Dialog</Button>
20      </AlertDialogTrigger>
21      <AlertDialogContent className="max-w-md!">
22        <AlertDialogHeader className="pb-4">
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 className="border-t">
35          <Button
36            className="mr-auto -ml-3 text-muted-foreground"
37            variant="link"
38          >
39            Learn more <ExternalLink />
40          </Button>
41          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
42          <AlertDialogAction variant="destructive">
43            <Trash />
44            Continue
45          </AlertDialogAction>
46        </AlertDialogFooter>
47      </AlertDialogContent>
48    </AlertDialog>
49  );
50}