alert-dialog

Modal confirmation dialog that requires an explicit user action.

A headless alert dialog (WAI-ARIA alertdialog) for confirmations and destructive actions. Same overlay foundation as @fluixi/dialog, but it does not dismiss on outside pointer down, and focus starts on the cancel action.

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

<AlertDialog>
  <AlertDialogTrigger>Delete</AlertDialogTrigger>
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={remove}>Delete</AlertDialogAction>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>

• role="alertdialog", aria-modal, and required title/description wiring.
• Closes on Escape, AlertDialogAction and AlertDialogCancel; never on outside pointer down. Focus is trapped, starts on Cancel, and restores on close.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.