AIR Stack

Appearance

Dialog ​

Material Design dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Theme Variables ​

You can customize the dialog's layout by overriding its CSS variables.

css
:root {
  --air-dialog-padding: calc(var(--spacing) * 6); /* 24px */
  --air-dialog-radius: var(--radius-xl);
  --air-dialog-max-width: calc(var(--spacing) * 140); /* 560px */
}

These variables define the internal padding, corner radius, and maximum width of the dialog container.

Composed Utilities ​

The primary composed utility is designed to be applied directly to a native HTML <dialog> element. It handles animations, centering, and backdrop shading natively.

html
<dialog class="dialog" id="my-dialog">
  <h2 class="dialog-title">Dialog Title</h2>
  <div class="dialog-content">
    This is the content of the dialog. It explains what action needs to be taken.
  </div>
  <div class="dialog-actions">
    <button class="button-text">Cancel</button>
    <button class="button">Accept</button>
  </div>
</dialog>
  • dialog: The standard composed dialog. It applies dialog-base and dialog-surface. It natively integrates with the HTML <dialog> element's open attribute and JavaScript API (.showModal()), providing built-in CSS transitions for opacity, scaling, and the ::backdrop.

Content Structure ​

Use these utilities to lay out the content inside a dialog properly.

  • dialog-title: Applies headline typography (headline-small) and appropriate margins for the top of the dialog.
  • dialog-content: Applies body typography (body-medium), text colors (on-surface-variant), and spacing below the content area.
  • dialog-actions: A flex container aligned to the right with standard gap spacing for action buttons.

Composing Utilities ​

For custom dialogs, use the granular base, surface, and modifier layers.

html
<dialog class="dialog-base dialog-surface dialog-fullscreen">
  <!-- Fullscreen dialog content -->
</dialog>
  • dialog-base: Sets up the core layout (margin: auto, max-width, padding, border-radius), resets native borders, and handles open/close animations using the [open] attribute. It also includes styling for the native ::backdrop pseudo-element with an animated scrim color and background blur effect.
  • dialog-surface: Applies the surface-container-high background color and standard text color.
  • dialog-fullscreen: A modifier that forces the dialog to cover the entire viewport (w-screen, h-screen, m-0, rounded-none).