Dialogs

Modal dialogs and popups for confirmations, definitions, and interactive content. Built on native <dialog> for accessibility.

Native dialog

Base styling for modal dialogs using native <dialog> elements.

Basic dialog

Dialog title

This is a dialog with a title, body content, and a close button.

Usage

Dialogs use native <dialog> elements with layout primitives:

  • .dialog - Visual styling (backdrop, shadow, radius)
  • .imposter-contain - Size constraints (width, max-width)
  • .dialog-close - Close button styling
  • Use .box, .stack, .cluster for internal structure

Popup dialog

The <popup-dialog> Web Component wraps any trigger element.

Confirmation

Info panel

Layout primitives are simple, reusable CSS patterns for common spatial relationships.

Footnotes

A key finding1 shows that consistent spacing improves readability.

Attributes

Configuration options for <popup-dialog>. Additive by design—no footer unless you add buttons.

  • title - Modal title (optional)
  • body - Body text content
  • confirm-label - Adds a confirm button with this label
  • cancel-label - Adds a cancel button with this label
  • confirm-href - URL to navigate on confirm
  • confirm-variant - Button style: "accent" (default) or "red"

Slots

Named slots for custom content.

  • default - The trigger element (button, link, text)
  • slot="body" - Custom HTML body content
  • slot="actions" - Custom action buttons