Dialog

Dialog component is built using the native HTML <dialog> element, providing better accessibility, keyboard navigation, and browser support out of the box.

How it works

Uses the native <dialog> element for better semantics and accessibility
Automatically manages focus and keyboard interactions (ESC to close)
Native backdrop support with ::backdrop pseudo-element
Simple JavaScript API for opening and closing dialogs

Static example

Without backdrop

A basic dialog without backdrop overlay.

<dialog style="position: relative; display: block; margin: 0 auto">
  <div class="header">
    <button type="button" class="close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4>Dialog title</h4>
  </div>
  <div class="body"><p>This is a dialog without backdrop overlay.</p></div>
  <div class="footer">
    <button type="button">Close</button>
    <button type="button" class="primary">Save changes</button>
  </div>
</dialog>

With backdrop

A dialog with backdrop overlay (using class="backdrop").

<div class="dialog-static-wrapper">
  <dialog>
    <div class="header">
      <button type="button" class="close">
        <span aria-hidden="true">&times;</span>
      </button>
      <h4>Dialog with backdrop</h4>
    </div>
    <div class="body">
      <p>This dialog is displayed with a backdrop overlay behind it.</p>
    </div>
    <div class="footer">
      <button type="button">Close</button>
      <button type="button" class="primary">Save changes</button>
    </div>
  </dialog>
</div>

Live demo

Toggle a dialog via JavaScript by clicking the button below. Add class="backdrop" to show backdrop overlay.

<button
  class="btn primary"
  onclick="document.getElementById('live-dialog-backdrop').showModal()"
>
  With backdrop
</button>
<button
  class="btn"
  onclick="document.getElementById('live-dialog-no-backdrop').showModal()"
>
  Without backdrop
</button>

Optional sizes

Dialogs have two optional sizes, available via modifier classes on the dialog element.

<button
  class="btn primary"
  onclick="document.getElementById('small-live-dialog').showModal()"
>
  Small dialog
</button>
<button
  class="btn primary"
  onclick="document.getElementById('large-live-dialog').showModal()"
>
  Large dialog
</button>

Usage

Via data attributes

Activate a dialog without writing JavaScript. Set data-toggle="dialog" on a button, along with a data-target="#foo" to target a specific dialog to toggle.

<!-- Dialog with backdrop -->
<button data-toggle="dialog" data-target="#myDialog">Launch dialog</button>

<dialog id="myDialog" class="backdrop">
  <div class="header">
    <button type="button" class="close" data-dismiss="dialog">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4>Dialog title</h4>
  </div>
  <div class="body">
    <p>Dialog content goes here...</p>
  </div>
  <div class="footer">
    <button type="button" data-dismiss="dialog">Close</button>
    <button type="button" class="primary">Save changes</button>
  </div>
</dialog>

<!-- Dialog without backdrop -->
<dialog id="myDialog2">
  <!-- No backdrop class, opens without overlay -->
</dialog>

Via JavaScript

Use the global Dialog API to control dialogs programmatically:

// Open a dialog
const dialog = document.querySelector('#myDialog');
Dialog.open(dialog);

// Close a dialog
Dialog.close(dialog);

// Listen to dialog events
dialog.addEventListener('dialog:opened', (e) => {
  console.log('Dialog opened', e.detail.dialog);
});

dialog.addEventListener('dialog:closed', (e) => {
  console.log('Dialog closed', e.detail.dialog);
});

Keyboard interaction

The native <dialog> element provides built-in keyboard support:

ESC - Close the dialog
Tab - Navigate between focusable elements within the dialog (focus is trapped)

Accessibility

Using the native <dialog> element provides several accessibility benefits:

Proper semantic markup with native dialog behavior
Automatic focus management and focus trapping
Built-in keyboard navigation (ESC to close)
Native backdrop that blocks interaction with background content