Dialog

Modal surface for critical decisions and focused input. Part of the Containment family.

Live demo

Reset settings?

This will restore all appearance and network settings to their defaults. This action cannot be undone.

Usage

<span class="orbit-dialog" role="group" aria-label="dialog">
  <!-- Dialog composition: container, content, state layer -->
</span>

.orbit-dialog {
  border-radius: var(--md-shape-corner-12);
  background: var(--md-dialog-container);
  color: var(--md-on-surface);
  transition: box-shadow 200ms var(--md-motion-easing-standard);
}

Keyboard: Tab moves focus, Space/Enter activate.
Focus ring: 3px outer, 2px offset, --md-primary.
Contrast: on-primary on primary ≥ 4.5:1 (WCAG 2.2 AA).
Announce state changes with aria-live="polite".

Anatomy

1. Container 2. State layer 3. Content (label / icon) 4. Focus ring. Optional: badge, supporting icon on the end side.

Properties

Property	Type / values	Description
`Variant`	`filled` · `tonal` · `outlined` · `text`	Visual emphasis of the control.
`Disabled`	`boolean`	Removes the control from the tab order and applies the 38% on-surface opacity.
`Size class`	`compact` · `medium` · `expanded`	Window-size adaptation; the default resolves from the container.
`Density`	`0` – `3`	Progressively tighter vertical rhythm, docked at 36px minimum.

Design tokens

This component reads --md-dialog-container, --md-on-surface, --md-outline and elevation levels 0–2. The full reference ships in the token bundle.