Search documentation
Search pages, components, blocks, styles and colours.
A modal dialog that interrupts the user with important content and expects a response.
Installation
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Composition
Use the following composition to build an AlertDialog:
AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
├── AlertDialogHeader
│ ├── AlertDialogMedia
│ ├── AlertDialogTitle
│ └── AlertDialogDescription
└── AlertDialogFooter
├── AlertDialogCancel
└── AlertDialogActionBasic
A basic alert dialog with a title, description, and cancel and continue buttons.
Small
Use the size="sm" prop to make the alert dialog smaller.
Media
Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.
Small with Media
Use the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.
Destructive
Use the AlertDialogAction component to add a destructive action button to the alert dialog.
API Reference
size
Use the size prop on the AlertDialogContent component to control the size of the alert dialog. It accepts the following values:
For more information about the other components and their props, see the Radix UI documentation.