Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
shadcn/ui docsInstallation
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/alert-dialog.jsonUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'<AlertDialog>
<AlertDialogTrigger render={<Button />}>Open</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>Examples
Default
Basic
A basic alert dialog with a title, description, and cancel and continue buttons.
Small
Use the size="sm" prop on AlertDialogContent 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 for the destructive action. There is no destructive button variant in this style, so pass a className to AlertDialogMedia to give the icon a warning treatment.