Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

shadcn/ui docs

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/alert-dialog.json

Usage

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.