Alert Dialog

A modal confirmation dialog that interrupts the user to confirm a destructive or irreversible action. Focus-trapped, keyboard-accessible, and WAI-ARIA compliant.

Built on Radix UI.

✓Blocks all page interaction until resolved
✓Separate Action (confirm) and Cancel buttons with correct keyboard roles
✓Accessible title and description via AlertDialogTitle / AlertDialogDescription
✓Animated open/close with Tailwind animate-in/out utilities

import { Alert Dialog }from "@aetherstack/ui"

alert dialog.tsx

import {
  AlertDialog, AlertDialogAction, AlertDialogCancel,
  AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
  AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
} from "@aetherstack/ui"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete your account.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Usage

Custom action styles

AlertDialogAction accepts className to override button styles.

Props

Prop	Type	Default	Description
AlertDialog	Root	—	Root controller. No visible output — manages open state.
AlertDialogTrigger	Trigger	—	Button that opens the dialog. Use asChild to pass your own button.
AlertDialogContent	Content	—	The dialog panel. Renders into a Portal.
AlertDialogTitle*	Title	—	Accessible dialog title announced by screen readers.
AlertDialogDescription*	Description	—	Accessible description — required by ARIA alert dialog spec.
AlertDialogAction	Action	—	Confirm button. Closes the dialog on click. Default styling: primary button.
AlertDialogCancel	Cancel	—	Cancel button. Closes the dialog. Default styling: outline button.

* Required props

Accessibility

→Uses role="alertdialog" — screen readers announce the dialog title and description immediately on open.
→Focus is trapped inside the dialog while open and restored to the trigger on close.
→Escape key closes the dialog via the Cancel action.
→AlertDialogTitle and AlertDialogDescription are required for accessibility — do not omit them.