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,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { CheckCircle2 } from "lucide-react";
function AlertDialog4() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Success Message</Button>
</AlertDialogTrigger>
<AlertDialogContent className="max-w-[360px]">
<AlertDialogHeader>
<div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-green-50">
<CheckCircle2 className="size-6 text-green-600" />
</div>
<AlertDialogTitle className="text-center">
Password Reset Email Sent
</AlertDialogTitle>
<AlertDialogDescription className="text-center">
<span>
We've sent a password reset link to your email address
(praveen@example.com) Please check your inbox and follow the
instructions.
</span>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction className="w-full bg-[#2563eb] hover:bg-[#2563eb]/90 ">Okay</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
export { AlertDialog4 }