OOratiq

Alert Dialog

Ready

Modal that interrupts for confirmation.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add alert-dialog

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, /* … */ } from "@/components/ui/alert-dialog";

Destructive confirmation

Not the same as Dialog

An alert dialog has no close button and can't be dismissed by clicking outside. It asks a question and requires an answer. Use it only when proceeding accidentally would cost the user something — deleting data, discarding work, spending money. Everything else is a Dialog.

Accessibility

  • Renders role="alertdialog", which tells assistive tech this interrupts rather than merely appears.
  • Focus lands on the Cancel action by default, so a stray Enter key doesn't confirm a destructive action.
  • Escape maps to Cancel, never to the confirm action.
  • Name the action after what it does — 'Delete', not 'OK'.

View source on GitHub → components/ui/alert-dialog.tsx