Dialog

Overview

Dialogs display content that requires user attention before returning to the main interface. They are commonly used for confirmations, forms, settings, and other focused interactions.

MiniKit builds on the native <dialog> element, providing accessible styling while adding a declarative API for opening and closing dialogs without writing JavaScript.

Basic Usage

Open dialogs using the data-dialog-open attribute and close them with data-dialog-close.

<button data-dialog-open="basic-dialog">Open Dialog</button>
<dialog id="basic-dialog">
  <header>
    <h3>Dialog Title</h3>
    <p>Optional dialog description.</p>
  </header>
  <section><p>Dialog content goes here.</p></section>
  <footer><button data-dialog-close>Close</button></footer>
</dialog>

Declarative API

MiniKit automatically handles opening and closing dialogs through data attributes. No custom JavaScript is required for common dialog interactions.

<button data-dialog-open="settings">Open Settings</button>
<dialog id="settings">
  <header>
    <h3>Settings</h3>
  </header>
  <section>
    <p>Dialog content...</p>
  </section>
  <footer>
    <button data-dialog-close>Close</button>
  </footer>
</dialog>

Sizes

The default dialog provides a comfortable medium width. Use optional size modifiers when additional control over the layout is needed.

Structure

A dialog typically consists of a header, content area, and footer. MiniKit automatically styles these sections when they are direct children of the <dialog> element.

<dialog id="settings">
  <header>
    <h3>Title</h3>
    <p>Description</p>
  </header>
  <section><p>Content</p></section>
  <footer>
    <button data-dialog-close>Cancel</button>
    <button>Confirm</button>
  </footer>
</dialog>

Accessibility

MiniKit builds on the native <dialog> element, preserving browser-provided accessibility features while adding declarative controls.

• Focus automatically moves into modal dialogs when they are opened.
• Pressing Esc closes modal dialogs in supported browsers.
• Clicking outside the dialog automatically closes it.
• Always provide a descriptive heading and clear actions.
• Icon-only controls should include an aria-label.
• Use show() or showModal() only when opening dialogs programmatically.

API