Alert Dialog
A modal confirmation dialog that interrupts the user with important content and expects an explicit response. Built on Radix UI with focus containment, portal rendering, and pre-styled action buttons.
Pro features
What the Pro version adds to this component.
Interruptive by Design
Clicking outside never dismisses the dialog, so destructive actions always get an explicit decision
Focus Containment
Focus is trapped while open, moved in on open, and returned to the trigger on close
Pre-Styled Actions
Action and Cancel ship styled with MoonUI button variants and remain fully overridable
Polished Motion
State-driven fade, zoom, and slide animations on both the overlay and the panel
Portal Rendering
Overlay and content render in a portal above the page, immune to parent overflow and stacking bugs
WAI-ARIA Compliant
Implements the alertdialog role with automatic labelling for screen reader announcements
Installation
Install via CLI
npx @moontra/moonui-cli add alert-dialogUsage
Examples
Delete Confirmation
The classic destructive-action guard. Style the Action button with destructive tokens to signal severity.
Controlled State
Drive the dialog with open and onOpenChange to react to the outcome in your own state.
Unsaved Changes Guard
Interrupt navigation away from a form or editor when work would be lost.