Skip to content

Overlays

Dialog

Modal surface with portal, focus trap, scroll lock and Escape handling already wired together.

Dialog
import { Dialog } from '@anomalia-so/ui';

Notes

  • On phones prefer BottomSheet — a centred modal is a poor thumb target.
  • Set dismissible={false} for destructive confirmations so Escape and scrim taps do not resolve them.

Examples

Basics

Portal, focus trap, scroll lock and Escape handling are already wired. Set `dismissible={false}` for destructive confirmations.

API

PropTypeDefaultDescription
openboolean—Bindable visibility.
title / descriptionstring—Header text, wired to `aria-labelledby`.
size'sm' | 'md' | 'lg' | 'full''md'Max width.
dismissiblebooleantrueEscape and scrim taps close it.
footerSnippet—Action row pinned to the bottom.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.