Alert dialog

Asks to confirm something that cannot be undone. It does not close on an outside click; focus starts on Cancel. For anything else, use Dialog.

Installation

Terminal

npx rasengan-ui add alert-dialog

Or with the shadcn CLI, from the registry:

Terminal

npx shadcn@latest add https://ui.rasengan.dev/r/base/alert-dialog.json

It installs Button too.

Usage

app/delete-project.tsx

import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
 
export function DeleteProject() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>Delete project</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete Hidden Leaf?</AlertDialogTitle>
          <AlertDialogDescription>Its deployments and domains go with it. This can't be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive" onClick={remove}>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Sizes

size on AlertDialogContent: sm, default or lg, the width from the sm breakpoint. There is no full: a question that needs an answer before anything else stays small. The action takes a Button's variant, tone and size.

<AlertDialogContent size="sm">…</AlertDialogContent>

Villages

The dialog's surface and backdrop; Action and Cancel are buttons in the village's look.

Konoha · light

Konoha · dark

Kiri · light

Kiri · dark

Iwa · light

Iwa · dark

Accessibility

The popup is an alertdialog, named by its title and described by its description.
Focus starts on Cancel, the safe choice; Esc cancels; a click on the backdrop does nothing.

API reference

The parts of Base UI's Alert Dialog, styled:

Part	Notes
`AlertDialog`	`open`, `defaultOpen`, `onOpenChange`
`AlertDialogTrigger`	`render` to use a `Button`
`AlertDialogContent`	portal, backdrop and popup; `size` (`"sm" \| "default" \| "lg"`)
`AlertDialogHeader`, `AlertDialogFooter`	layout
`AlertDialogTitle`, `AlertDialogDescription`	name and describe it
`AlertDialogAction`	closes it; `variant`, `tone` and `size` of a Button
`AlertDialogCancel`	closes it; `variant` (default `"outline"`), focused first