Alert Dialog

v0.2.15

Ready for Production

Catalyst Alert Dialog extends Radix UI Alert Dialog with built-in design tokens and accessibility defaults, plus Tailwind-based styling — giving you a production-ready component after adding the AlertDialog Tailwind preset to your tailwind.config.ts.

Installation

npm install @pmi/catalyst-alert-dialog

import {
  AlertDialogRoot,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogTrigger,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@pmi/catalyst-alert-dialog';

Add the AlertDialog Tailwind preset to your tailwind.config.ts:

import tailwindAlertDialogPreset from "@pmi/catalyst-alert-dialog";

export default {
  presets: [tailwindAlertDialogPreset],
  // ...
};

Common Patterns

Demo

Demo composition of AlertDialog primitives with custom content and styling.

API Reference

Alert Dialog is a compound component built on Radix UI primitives. The sections below summarize the shared API surface for each part of the component.

AlertDialogRoot

Controls the dialog state and composition.

Accepts all standard Radix Alert Dialog Root props.

AlertDialogTrigger

The trigger that opens the dialog.

Accepts all standard Radix Alert Dialog Trigger props and forwards refs to the underlying trigger element.

AlertDialogPortal

Renders the dialog content in a portal.

Accepts all standard Radix Alert Dialog Portal props.

AlertDialogOverlay

The backdrop shown behind the dialog.

Accepts all standard Radix Alert Dialog Overlay props and forwards refs to the overlay element.

AlertDialogContent

The main dialog container.

Accepts all standard Radix Alert Dialog Content props and forwards refs to the content element.

AlertDialogTitle

The title text rendered in the dialog heading.

Accepts all standard Radix Alert Dialog Title props and forwards refs to the title element.

AlertDialogDescription

The descriptive text shown below the dialog title.

Accepts all standard Radix Alert Dialog Description props and forwards refs to the description element.

AlertDialogAction

The primary action button inside the dialog.

Accepts all standard Radix Alert Dialog Action props and forwards refs to the underlying action element.

AlertDialogCancel

The secondary action that closes the dialog.

Accepts all standard Radix Alert Dialog Cancel props and forwards refs to the underlying cancel element.

Accessibility

Keyboard Interactions

ARIA

• Uses the Radix alertdialog pattern, including dialog labeling and description wiring.
• The title is announced as the dialog label and the description is announced as supporting context.
• Provide an aria-label when using icon-only actions or triggers with no visible text label.
• Catalyst does not change the inherited Radix accessibility model; it keeps the same focus management, labelling, and dismissal behavior.

See the Radix UI Alert Dialog accessibility docs for inherited behavior.

Choosing the Right Component

Use Radix UI Alert Dialog when you need to interrupt the user with a critical message that requires an explicit decision before continuing. Reach for a different primitive when:

Related

• Dialog
• Sheet
• Popover
• Toast