Components

Alert dialog

Interruptive confirmation for destructive or non-recoverable actions. Blocks the page until the reader picks a side.

When to useto confirm something the operator cannot undo — delete, abort, sign out.

Import

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@ravnhq/efni/alert-dialog"

Destructive confirm

<AlertDialog>
  <AlertDialogTrigger
    render={<Button variant="destructive"><Icon icon={Trash2} />Delete mission</Button>}
  />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia><Icon icon={TriangleAlert} /></AlertDialogMedia>
      <AlertDialogTitle>Delete MB-4472?</AlertDialogTitle>
      <AlertDialogDescription>
        This removes the mission and its operator log. This cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Neutral confirm

Do & don't

Only prompt when the outcome is irreversible or high-cost — save's cheaper than the interruption.

Don't wrap ordinary saves in a confirmation — every extra click is friction the operator doesn't need.

Accessibility

Key	Action
`Esc`	Close the dialog and cancel.
`Tab / Shift+Tab`	Focus is trapped inside the dialog while open.
`Enter`	Activate the focused action.

Focus lands on AlertDialogCancel by default, so pressing Enter without moving focus is the safe choice.
Renders with role="alertdialog" and aria-labelledby/aria-describedby wired to the Title and Description.
Trigger uses Base UI's render prop — pass a Button element, never asChild.

Guidelines

Name the action, not the confirmation — Delete, Abort, Sign out.
Lead the description with the consequence: what disappears, what happens next.
Reserve the destructive variant for the action button when the outcome is destructive.

Don't

Don't use it for reversible changes — Toast + Undo is friendlier.
Don't label the confirm button OK — the operator shouldn't have to re-read the dialog to know what they're agreeing to.
Don't stack alert dialogs — resolve one before opening the next.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the dialog is currently open.
`onOpenChange`	`((open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void)`	—	Event handler called when the alert dialog is opened or closed.
`AlertDialogContent.size`	`"default" \| "sm"`	`"default"`	Compact variant for one-line confirmations.
`AlertDialogAction.variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`"default"`	Visual style of the button.
`…props`	`AlertDialogPrimitive.Root.Props`	—	Everything AlertDialog passes to the element it renders.