Components
Loading preview...
A modal dialog that interrupts the user with important content and expects a response.
npx shadcn@latest add https://21st.dev/r/shadcn/alert-dialogimport {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button, buttonVariants } from "@/components/ui/button";
import { Trash2 } from "lucide-react";
function AlertDialog3() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button>Show Centered Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader className="mb-4 items-center gap-2">
<div
aria-hidden="true"
className="shrink-0 rounded-full bg-red-50 p-3 dark:bg-red-900"
>
<Trash2 className="size-5 text-red-600 dark:text-red-200" />
</div>
<div className="flex flex-col gap-2 text-center">
<AlertDialogTitle>Delete Account?</AlertDialogTitle>
<AlertDialogDescription className="text-balance">
Deleting your account is irreversible and will erase all your
data. This action cannot be undone.
</AlertDialogDescription>
</div>
</AlertDialogHeader>
<AlertDialogFooter className="sm:justify-between">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
export { AlertDialog3 }