Skip to content
Aback UI

Overlays

Alert Dialog

A modal that requires an explicit response before an irreversible action runs.

BetaNew shared patternRegistry JSON (opens in a new tab)

A confirmation step for an irreversible action.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add alert-dialog

Writes components/ui/alert-dialog.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Alert Dialog. Native element props pass through.

PropTypeDefaultDescription
open / defaultOpen / onOpenChangeboolean / boolean / (open: boolean) => voidNoneControlled or uncontrolled visibility.
AlertDialogAction / AlertDialogCancelcomponentNoneBoth close the dialog. Action runs the destructive callback; Cancel dismisses. Style Action as destructive when the action is irreversible.
AlertDialogTitle / AlertDialogDescriptioncomponentNoneTitle names the decision and is required. Description states the consequence in one or two sentences.
classNamestringNoneLayout adjustments only.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Renders role alertdialog, which screen readers announce as a decision that needs a response.
  • Radix traps focus, closes on Escape, and returns focus to the trigger.
  • Use this pattern only when the action is destructive or irreversible; routine forms belong in Dialog.
  • The action button must name the verb (Delete project), not Yes, so the choice is clear out of context.

Keyboard

KeyAction
EscapeClose without running the action.
TaborShift+TabMove between Cancel and the action.
EnterorSpaceActivate the focused action.

The action is not a red button by default. Pass the destructive classes when the consequence warrants it, and keep the label specific either way.

Used in production

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.

Related