Dialog
A centered modal. Flat surface, no colored header, hairline dividers between title, body, and footer.
Dialog is the native <dialog> element: a <header> for the title, a
<footer> for the button row, and everything else in between is the body —
no wrapper classes at all.
The example below is shown with a plain open attribute, scoped to its own
preview box rather than the real viewport-covering overlay, so it renders
without JavaScript and can sit safely inside a documentation page. It
centers itself using the browser’s own default <dialog> styling
(position: absolute; inset: 0; margin: auto) against the preview box,
which is why it needs that box to be position: relative. Call
.showModal() in the consuming app for the real fixed-overlay behavior —
a plain open attribute never paints a ::backdrop, since that
pseudo-element only exists for a dialog shown modally.
Markup
<dialog open>
<header>Delete series?</header>
<p>This removes all of its task history. This cannot be undone.</p>
<footer>
<button>Cancel</button>
<button data-variant="danger">Delete</button>
</footer>
</dialog>Without a footer
A body-only dialog for a notice rather than a decision.
Markup
<dialog open style="width: 20rem;">
<header>Backup complete</header>
<p>412 files, 1.2GB, archived to the household drive.</p>
</dialog>API
| Element / attribute | Values | Notes |
|---|---|---|
dialog | Required base. Call .showModal() to open it for real — a plain open attribute is for static, always-open documentation only. | |
dialog > header | Optional — a body-only dialog omits it. | |
dialog > footer | Optional. Usually a pair of Buttons — the least committing action first. | |
dialog::backdrop | The dimmed overlay. Only renders once the dialog is shown via .showModal(). | |
close event | Fired on cancel — wire it, or a form's method="dialog", instead of an onClose prop. |