HTML dialog commands: open and request close with named buttons

Choose the contract

A reviewer opens a seal-policy note while completing an intake form. The opening button is explicitly type=button so it cannot submit an enclosing form by accident. Inside the dialog, another button requests closure and gives users a visible way back. A close request may pass through cancel handling, unlike an unconditional close; code that needs to guard unsaved work should test that behavior in the actual browser. The policy text is read-only, so a dialog may be excessive if it could simply remain on the page. Use it when the context calls for a modal interruption. Before depending on these declarative commands, verify support in the browsers your audience uses and provide a tested alternate control when necessary.

<button type="button" commandfor="seal-policy" command="show-modal">
  Read seal policy
</button>
<dialog id="seal-policy" aria-labelledby="seal-policy-title">
  <h2 id="seal-policy-title">Seal policy for bay C-47</h2>
  <p>Hold parcels with a broken upper seal until a second reviewer signs.</p>
  <button type="button" commandfor="seal-policy" command="request-close">
    Return to intake
  </button>
</dialog>

Cost and verification

The native dialog handles top-layer placement and modal focus behavior without a custom overlay library. The markup still needs keyboard, focus-return, and small-screen tests, and the policy must remain available if the feature is unsupported. No network request is made by either button. The ID must resolve within the same tree, and the targeted element must actually be a dialog. Do not add a script merely to recreate built-in behavior when the supported browser set already provides it.

Common Mistakes

• Do not omit type=button inside or near a form.
• Do not read a close request as proof that an incident was approved.
• Do not ship the command pair without testing the target browser and a visible escape path.

Connected lessons

• HTML details and dialog: distinguish disclosure from a modal task
• HTML form method=dialog: close a decision panel without a network request
• HTML focus order: use native controls and keep DOM order usable

Continue with HTML dialog closedby: choose whether outside clicks dismiss a panel.