Dialog

Preview Code

375 768 Full

Open

html

<dialog class="aparte-dialog" id="settings" aria-labelledby="settings-title">
  <div class="aparte-dialog__header">
    <h2 class="aparte-dialog__title" id="settings-title">Settings</h2>
    <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-dialog__close" type="button" aria-label="Close" data-aparte-dialog-close>
      <aparte-icon name="close"></aparte-icon>
    </button>
  </div>
  <div class="aparte-dialog__body">
    <label class="aparte-field-label" for="endpoint">Endpoint</label>
    <input class="aparte-field" id="endpoint" value="http://localhost:11434/v1">
  </div>
  <div class="aparte-dialog__footer">
    <button class="aparte-btn aparte-btn--ghost" type="button" data-aparte-dialog-close>Cancel</button>
    <button class="aparte-btn aparte-btn--primary aparte-btn--solid" type="button" data-aparte-dialog-close="saved">Save</button>
  </div>
</dialog>
<button class="aparte-btn aparte-btn--surface" type="button" data-aparte-dialog-open="settings">Open settings</button>

.aparte-dialog styles the browser’s own <dialog>, which already does what a modal needs: opened with showModal(), it sits above everything, keeps the focus inside, closes on Escape, gives the focus back and dims the page behind a backdrop. The recipe draws a __header with a __title and a __close button, a __body and a __footer for the actions.

Core adds the wiring. A control with data-aparte-dialog-open="settings" opens the dialog whose id is settings; a control inside with data-aparte-dialog-close closes it; a click on the backdrop closes it too, unless the dialog carries data-aparte-dialog-static.

Customize

Variable	Default
--aparte-dialog-width	—

Classes

.aparte-dialog · .aparte-dialog--lg · .aparte-dialog--sm · .aparte-dialog__body · .aparte-dialog__close · .aparte-dialog__footer · .aparte-dialog__header · .aparte-dialog__title

Accessibility

• Name the dialog with aria-labelledby pointing at its title.
• The close button shows a cross: give it an aria-label.
• Keyboard, focus and Escape are the browser’s, through showModal().

Related

• Popover — a box that floats without blocking the page.
• Field — the controls a settings dialog holds.