A full-focus overlay window for critical information, forms, or workflows that need
undivided attention. Built on the native <dialog>
element, so focus trapping, top-layer rendering, and focus restoration come for free.
Slot footer buttons into actions; the footer hides
itself when empty.
Modal body content goes here. Background content is inert while the modal is open, and focus is trapped within it.
Flags empty required fields and only closes when valid.
This action cannot be undone.
With no actions slot, the footer is hidden.
A modal with no footer actions — dismiss with the close button, Escape, or a backdrop click.
no-dismiss disables Escape and backdrop clicks —
the user must choose an action.
Escape and backdrop clicks are disabled — you must choose an action.
confirmations, focused tasks, and short forms that must
interrupt the current flow. Call show() to open and
close() to dismiss — Escape and backdrop clicks also
dismiss unless no-dismiss is set.
heading and put the primary action last.no-dismiss unless an action is truly required.<dialog>.showModal() — focus is trapped, background content is inert, and focus returns to the trigger on close (WAI-ARIA APG Dialog pattern).heading renders an <h2> that names the dialog; always provide one.no-dismiss); the close button is a labelled Button Icon.sc-open and sc-close for wiring side effects.