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 { TriangleAlert } from "lucide-react";
function AlertDialog5() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Error 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-red-50">
<TriangleAlert className="size-5 text-red-600" />
</div>
<AlertDialogTitle className="text-center">
Invalid Email Address
</AlertDialogTitle>
<AlertDialogDescription className="text-center">
<span>
Please enter a valid email address in the format name@example.com.
</span>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction className="w-full bg-[#2563eb] hover:bg-[#2563eb]/90">Okay</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
export { AlertDialog5 }