Alert Dialog
A modal dialog that interrupts the user with important content.
Saved preference for
elorm init --ui-library base-uiPreviewCode
"use client"
import { Button } from "@/components/ui/button"
import {
AlertDialog,
AlertDialogClose,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger render={<Button variant="destructive">Open alert dialog</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose render={<Button variant="outline">Cancel</Button>} />
<AlertDialogClose render={<Button>Continue</Button>} />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
Installation#
Usage#
import { AlertDialog } from "@/components/ui/alert-dialog"A modal dialog that interrupts the user with important content.