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";
function AlertDialog1() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button>Show Alert Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Account?</AlertDialogTitle>
<AlertDialogDescription>
Deleting your account is irreversible and will erase all your data.
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
export { AlertDialog1 }