Alert Dialog
A modal dialog that requires user response to proceed.
alert-dialog-demo.tsx
import {
AlertDialogRoot,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogClose,
} from "@/components/ui/alert-dialog/alert-dialog";
import { Button } from "@/components/ui/button/button";
export default function AlertDialogDemo() {
return (
<AlertDialogRoot>
<AlertDialogTrigger render={<Button variant="destructive">Delete Account</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our
servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose render={<Button variant="secondary">Cancel</Button>} />
<Button variant="destructive">Delete Account</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogRoot>
);
}
Installation
npx shadcn@latest add https://roiui.com/r/alert-dialog.json
Anatomy
anatomy
import {
AlertDialogRoot,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogClose,
} from '../ui/alert-dialog'
<AlertDialogRoot>
<AlertDialogTrigger />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle />
<AlertDialogDescription />
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogRoot>