← Components/primitives

AlertDialog

Wraps Radix AlertDialog (role="alertdialog"). Use for destructive confirmations and error acknowledgements where the user MUST decide before continuing. Cannot be dismissed by clicking the scrim or pressing Escape — only by an action button.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel } from "@avala/design";

<AlertDialog size="sm">
  <AlertDialogAction />
  <AlertDialogBody />
  <AlertDialogCancel />
</AlertDialog>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-alertdialog--defaultOpen in Storybook →

When to use

Confirm destructive actions: delete, drop, archive, irreversibly publish.
Acknowledge a blocking error before letting the user continue.
The decision is required — no implicit cancel via Escape or scrim click.

When not to use

Non-blocking forms / configuration modals → use `Dialog`.
Inline confirmation that allows Escape / scrim dismiss → use `Dialog`.
A toast or inline notification → use the Notification pattern.