Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Demo
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Open Alert Dialog</Button>
</AlertDialogTrigger>
<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>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}API Reference
AlertDialog
The root component that manages the dialog state.
PropsNone
AlertDialogTrigger
The element that triggers the dialog to open.
PropsasChild
AlertDialogContent
The content container for the dialog.
PropsStandard dialog props
AlertDialogHeader
Contains the title and description of the dialog.
PropsNone
AlertDialogTitle
The title of the dialog.
PropsasChild
AlertDialogDescription
The description of the dialog.
PropsasChild
AlertDialogFooter
Contains the action buttons for the dialog.
PropsNone
AlertDialogAction
The primary action button.
PropsasChild
AlertDialogCancel
The cancel/dismiss action button.
PropsasChild
Accessibility
Keyboard Navigation
- • Tab: Move focus between interactive elements
- • Enter/Space: Activate focused element
- • Escape: Close dialog
Screen Reader Support
- • Proper ARIA attributes for dialog role
- • Focus management and restoration
- • Descriptive labels and content
HUD · Page · Tree
All systems operational
HUD · Page · Tree