Alert Dialog

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

Installation

npx shadcn@latest add @uqudo/alert-dialog

Installing it also installs Button, which it depends on for the action and cancel buttons.

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/uqudo/ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this account?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Unlike a regular dialog, an alert dialog cannot be dismissed by clicking the overlay. The user has to choose one of the buttons.

Add AlertDialogMedia as the first child of the header to show an icon in a round muted circle above (or, at the default size on larger screens, beside) the title:

<AlertDialogHeader>
  <AlertDialogMedia>
    <Trash2 />
  </AlertDialogMedia>
  <AlertDialogTitle>Delete this account?</AlertDialogTitle>
  <AlertDialogDescription>...</AlertDialogDescription>
</AlertDialogHeader>

API Reference

AlertDialog

The root. Holds the open state and renders no DOM of its own.

Prop

Type

AlertDialogContent

Renders the portal, the overlay and the centred panel.

Prop

Type

AlertDialogAction

The confirming button. Renders a Button around AlertDialogPrimitive.Action, so it closes the dialog when clicked.

Prop

Type

AlertDialogCancel

Same as AlertDialogAction but wraps AlertDialogPrimitive.Cancel and defaults to the outline variant.

Prop

Type

Other parts

These accept className plus the props of the element or primitive they render.

Component	Renders	Notes
`AlertDialogTrigger`	`AlertDialogPrimitive.Trigger`	Use `asChild` to make an existing button the trigger.
`AlertDialogPortal`	`AlertDialogPrimitive.Portal`	Already used by `AlertDialogContent`.
`AlertDialogOverlay`	`AlertDialogPrimitive.Overlay`	Dimmed, blurred backdrop. Already used by `AlertDialogContent`.
`AlertDialogHeader`	`div`	Grid for media, title and description. Centred on small screens.
`AlertDialogMedia`	`div`	64px round muted circle for an icon. Place it first inside `AlertDialogHeader`.
`AlertDialogTitle`	`AlertDialogPrimitive.Title`	Heading font, labels the dialog for assistive tech.
`AlertDialogDescription`	`AlertDialogPrimitive.Description`	Muted body text.
`AlertDialogFooter`	`div`	Stacks buttons on small screens, right-aligns them in a row from `sm` up.

Data attributes

Every part carries a data-slot of its kebab-case name (alert-dialog, alert-dialog-content, alert-dialog-media, ...). AlertDialogContent also sets data-size to the resolved size.

On this page