Components

Dialog.

A modal that interrupts the flow for one decision — confirm, edit, or warn. It traps focus, dims the page behind a scrim, and returns focus to the trigger when it closes. Use it sparingly; if the task has more than a few fields, reach for a drawer instead.

Anatomy

Title, body, and a footer where the primary action sits on the right.

Surfacevar(--surface)

Radiusvar(--radius-3)

Shadowvar(--shadow-overlay)

Scrimrgba(20,20,15,.32)

Default width360–480px

Accessibility

A dialog that doesn't trap focus is a trap of a different kind.

role="dialog"On the panel, always paired with aria-modal="true".

aria-labelledbyPoints at the title element, so screen readers announce the dialog by name.

Focus trapTab and Shift+Tab cycle within the dialog; nothing behind the scrim is reachable.

Initial focusMoves to the first interactive element — or the dialog itself if there is none.

Esc closesEscape dismisses non-destructive dialogs; focus returns to the trigger.

Scrim clickCloses the dialog for light, dismissible cases — never for destructive confirms.

Props (React)

type DialogProps = {
  open: boolean;
  onClose: () => void;          // Esc, scrim click, or close button
  title: string;                // wired to aria-labelledby
  children: ReactNode;          // body content
  footer?: ReactNode;           // actions — primary on the right
  dismissible?: boolean;        // default true; false for destructive confirms
};

← PreviousCards Next →Tabs