Overlay

Overlays are used to show content in a layer above the application.

Usage

Use the .Overlay class on a native <dialog> element. Open and close it with the browser's built-in dialog API.

<dialog class="Overlay" id="my-modal">
  <header class="Overlay-Header">
    <h3>Confirm action</h3>
    <button class="Overlay-Close" aria-label="Close">×</button>
  </header>
  <div class="Overlay-Content">
    <p>Are you sure you want to proceed?</p>
  </div>
  <footer class="Overlay-Footer">
    <button class="Button neutral">Cancel</button>
    <button class="Button primary">Proceed</button>
  </footer>
</dialog>

Opening and Closing

document.getElementById('my-modal').showModal();
document.getElementById('my-modal').close();

Sizes

• .compact: Narrow overlay (400px).
• Default: Standard overlay (560px).
• .large: Wide overlay (760px).
• .full: Full-screen overlay.

<dialog class="Overlay compact">…</dialog>
<dialog class="Overlay large">…</dialog>

Loading State

Add the data-loading attribute to show a spinner over the body while async work completes.

<dialog class="Overlay" data-loading>
  <!-- content -->
</dialog>

Structure

• .Overlay-Header: Top section with title and close button.
• .Overlay-Content: Scrollable content area.
• .Overlay-Footer: Bottom section for actions.
• .Overlay-Close: Close button inside the header.