ComponentsSpec

Dialog

Native dialog with showModal(): focus trap, Escape and an inert page come from the platform. 20px shell, one shadow.

Show code

<button class="btn btn-ghost" data-open="dlg-demo">Open dialog</button>
<button class="btn btn-ghost" data-open="dlg-danger">Destructive</button>
<dialog class="dlg" id="dlg-demo" aria-labelledby="dlg-demo-t">
  <h2 id="dlg-demo-t">Download the resume?</h2>
  <p>A one-page PDF, 180 KB. It opens in a new tab.</p>
  <div class="dlg-actions"><button class="btn btn-ghost btn-sm" data-close>Cancel</button><a class="btn btn-primary btn-sm" href="#" data-close><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Download</a></div>
</dialog>
<dialog class="dlg" id="dlg-danger" aria-labelledby="dlg-danger-t">
  <h2 id="dlg-danger-t">Delete this draft?</h2>
  <p>The draft and its 3 images are removed. This cannot be undone.</p>
  <div class="dlg-actions"><button class="btn btn-ghost btn-sm" data-close>Keep draft</button><button class="btn btn-danger btn-sm" data-close>Delete draft</button></div>
</dialog>

Behaviour

data-open="id" opens, data-close closes, a click on the backdrop closes.
Opens with a 320ms settle (8px rise, 98% scale); reduced motion drops it.
Width min(480px, 100vw - 32px); on a phone it keeps 16px gutters.

Name both buttons with what they do: "Keep draft" / "Delete draft".
Put the safe action first; the destructive one is the only coloured button.

Don't

Use a dialog for something a page could show inline.
Stack dialogs.