CatalystAlert Dialogv0.3.1Ready for Production
A modal dialog requiring explicit user acknowledgment before proceeding with a critical or destructive action.
Prefer AI-assisted development?
An Alert Dialog interrupts the user to confirm a critical action, typically one that is potentially destructive or cannot be undone. It requires the user to explicitly acknowledge the message before continuing. Alert Dialogs are modal and use clear, focused language to communicate risk and intent. Catalyst Alert Dialog extends Radix UI Alert Dialog with built-in design tokens and accessibility defaults, plus Tailwind-based styling.
Installation
npm install @pmi/catalyst-alert-dialogimport {
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],
// ...
};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
| Key | Action |
|---|---|
Tab | Moves focus through interactive elements within the dialog while it is open |
Shift + Tab | Moves focus backward through the dialog's focus order |
Escape | Closes the dialog |
ARIA
- Uses the Radix
alertdialogpattern, 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-labelwhen 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:
| If you need… | Use instead |
|---|---|
| a general modal for forms, settings, or custom content | Dialog |
| a side panel that can hold longer content or multi-step actions | Sheet |
| lightweight contextual content anchored to a trigger | Popover |
| a passive notification that does not require a response | Toast |
Related
Tabs
Tab navigation for organizing related content into distinct views with accessible keyboard navigation and state management. Built on Radix UI Tabs.
Dialog
A general-purpose modal component for interrupting workflow with contextual content requiring explicit user action. Built on Radix UI primitives with focus management, Escape key handling, and accessible naming out of the box.