Dialog

A native <dialog> element for popovers and modal overlays. Use an <article> inside for the card styling.

Default

Use .show() for non-modal dialogs that don't block interaction with the rest of the page. Close with <form method="dialog">.

<button onclick="document.getElementById('my-dialog').show()">
  Open dialog
</button>

<dialog id="my-dialog" closedby="any">
  <article>
    <p style="margin-bottom: 1rem">This is a non-modal dialog.</p>
    <form method="dialog">
      <button class="outline">Close</button>
    </form>
  </article>
</dialog>

Modal

Call .showModal() to open as a modal — it blocks interaction with the page and renders a backdrop.

<button onclick="document.getElementById('my-modal').showModal()">
  Open modal
</button>

<dialog id="my-modal" closedby="any">
  <article>
    <p>This is a modal dialog.</p>
    <form method="dialog">
      <button>Confirm</button>
      <button class="outline">Cancel</button>
    </form>
  </article>
</dialog>

With header & footer

Use the card's <header> and <footer> for a structured layout with dividers.

<dialog id="my-modal" closedby="any">
  <article>
    <header>
      <strong>Confirm action</strong>
    </header>
    <p>Are you sure you want to continue?</p>
    <footer>
      <form method="dialog">
        <button class="destructive">Delete</button>
        <button class="outline">Cancel</button>
      </form>
    </footer>
  </article>
</dialog>

closedby

The closedby attribute controls how a dialog can be dismissed.

• closedby="any" — closes on outside click or Escape
• closedby="closerequest" — closes on Escape only (default for modal)
• closedby="none" — only closeable via <form method="dialog">

<dialog closedby="none">...</dialog>

scroll-lock

Add the scroll-lock attribute to prevent the page from scrolling while the dialog is open.

<dialog scroll-lock closedby="any">...</dialog>