Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Built on Base UI's alert dialog primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- AlertDialogTrigger measures the ambient direction where it renders and passes it to the portaled popup
- Fixes the classic RTL centering bug: the popup is anchored with start-1/2 (a logical position) but shifted back to center with -translate-x-1/2, a physical, LTR-only offset — in RTL this doubles the error instead of centering, so rtl:translate-x-1/2 flips the sign back. Only fires correctly now that dir is set explicitly on the popup instead of relying on document.documentElement
Overview
No footer
AlertDialogFooter is optional — for a single-action alert, AlertDialogCancel can sit directly in the content without the muted footer bar. It still has to be an actual action, though: Alert Dialog can't be dismissed by pressing Escape or clicking outside.
Installation
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
export function Example() {
return (
<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline">Delete</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}Examples
RTL
API Reference
AlertDialog
API reference: Base UI AlertDialog .