Avala Design
← Components/primitives

Dialog

Carbon's Modal, re-implemented on Radix Dialog. Three sizes (sm / md / lg) matching Carbon's spec. Includes Header / Body / Footer sub-parts so the layout is consistent across consumers.

primitivesstablea11y: untested3/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.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Dialog, DialogBody, DialogClose, DialogContent } from "@avala/design";

<Dialog size="md">
  <DialogBody />
  <DialogClose />
  <DialogContent />
</Dialog>

All variants

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

primitives-dialog--defaultOpen in Storybook →

When to use

  • General-purpose modals: configuration forms, multi-step flows, inline editors, large content overlays.
  • The user can dismiss via Escape, scrim click, or the close button.

When not to use

  • Destructive / blocking confirmations the user must answer → use `AlertDialog`.
  • Edge-anchored slide-out panels → use `Sheet`.
  • Tiny inline overlays anchored to a trigger → use `Popover` or `Tooltip`.