Alert Dialog
A modal dialog that interrupts the user's flow to communicate an important message and acquire a response.
Installation
npx shadcn@latest add alert-dialogUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Delete Account</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>
)
}Props
| Component | Props | Description |
|---|---|---|
| AlertDialog | AlertDialogPrimitive.AlertDialogProps | The root container for the alert dialog. |
| AlertDialogTrigger | AlertDialogPrimitive.AlertDialogTriggerProps | The button that opens the alert dialog. |
| AlertDialogContent | AlertDialogPrimitive.AlertDialogContentProps | The component that contains alert dialog content. |
| AlertDialogHeader | HTMLDivElement | Contains the title and description of the alert dialog. |
| AlertDialogTitle | AlertDialogPrimitive.AlertDialogTitleProps | The title of the alert dialog. |
| AlertDialogDescription | AlertDialogPrimitive.AlertDialogDescriptionProps | A description for the alert dialog. |
| AlertDialogFooter | HTMLDivElement | Contains the actions for the alert dialog. |
| AlertDialogAction | AlertDialogPrimitive.AlertDialogActionProps | The button that confirms the alert dialog action. |
| AlertDialogCancel | AlertDialogPrimitive.AlertDialogCancelProps | The button that cancels the alert dialog. |
Accessibility
Alert Dialog adheres to the WAI-ARIA Alert Dialog Pattern.
- When opened, focus is automatically trapped within the dialog.
- Pressing Escape closes the dialog.
- Focus is returned to the element that triggered the dialog when it's closed.
- Dialog role is applied to the appropriate element.
- ARIA attributes for title and description are automatically linked with the correct elements.