Overlay & disclosure

Dialog

Modal presentation built on the platform dialog element and declarative commands.

Canonical sourcepatterns/dialog.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

View HTML

<button type="button" commandfor="ex1-dialog-example-dialog" command="show-modal">Open dialog</button>
<dialog class="ef-dialog" id="ex1-dialog-example-dialog">
  <div class="ef-dialog__body">
    <h2>Confirm action</h2>
    <p>The browser owns modal focus, inertness, and Escape behavior.</p>
  </div>
  <div class="ef-dialog__actions">
    <button type="button" commandfor="ex1-dialog-example-dialog" command="close">Cancel</button>
  </div>
</dialog>

Example 2

Representative state

A browser-native state made visible without adding a runtime.

View HTML

<button type="button" commandfor="ex2-dialog-example-dialog" command="show-modal">Open dialog</button>
<dialog open class="ef-dialog" id="ex2-dialog-example-dialog">
  <div class="ef-dialog__body">
    <h2>Confirm action</h2>
    <p>The browser owns modal focus, inertness, and Escape behavior.</p>
  </div>
  <div class="ef-dialog__actions">
    <button type="button" commandfor="ex2-dialog-example-dialog" command="close">Cancel</button>
  </div>
</dialog>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

View HTML

<button type="button" commandfor="ex3-dialog-example-dialog" command="show-modal">Open dialog</button>
<dialog class="ef-dialog" id="ex3-dialog-example-dialog">
  <div class="ef-dialog__body">
    <h2>Confirm action</h2>
    <p>The browser owns modal focus, inertness, and Escape behavior.</p>
  </div>
  <div class="ef-dialog__actions">
    <button type="button" commandfor="ex3-dialog-example-dialog" command="close">Cancel</button>
  </div>
</dialog>