Skip to content
Bitsy UI 0.x
Theme
Menu: Dialog
  1. Docs
  2. Bits

Dialog

Dialog runs one blocking task or confirmation in a native modal window. It has one root hook, six part hooks, three sizes, an alert form, and no JavaScript: a native dialog opened by invoker commands.

Public web API

A native <dialog> with one root hook, part hooks for the header, body, and footer, and a Button with commandfor and command="show-modal" to open it.

<dialog data-bitsy-dialog id="rename-dialog" aria-labelledby="rename-title" closedby="any">
  <form method="dialog">
    <header data-bitsy-dialog-header>
      <h2 data-bitsy-dialog-title id="rename-title">Rename project</h2>
      <p data-bitsy-dialog-description>Names appear in the sidebar and in shared links.</p>
      <button data-bitsy-dialog-close type="button" commandfor="rename-dialog" command="close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg></button>
    </header>
    <div data-bitsy-dialog-body><div data-bitsy-text-field>
        <label for="project-name">Project name</label>
        <input id="project-name" name="name" value="Atlas" autofocus>
      </div></div>
    <footer data-bitsy-dialog-footer>
      <button data-bitsy-button type="button" commandfor="rename-dialog" command="close">Cancel</button>
      <button data-bitsy-button data-bitsy-variant="accent" value="save">Save</button>
    </footer>
  </form>
</dialog>
  • Always set aria-labelledby to the title; the title is a real heading.
  • data-bitsy-size="sm" | "lg" changes only the maximum width.
  • The alert form adds role="alertdialog" and aria-describedby, starts focus on Cancel, and never uses closedby="any".
  • closedby="any" adds click-outside to close for low-stakes dialogs; Safari ignores it and keeps Escape and the close button.
  • Invoker commands are Baseline 2025. For older browsers call dialog.showModal() from one click handler.

Try it

Open each dialog with the keyboard: Enter or Space opens, Tab stays inside, Escape closes, and focus returns to the button.

Rename project

Names appear in the sidebar and in shared links.

Delete workspace?

This removes 12 projects for everyone. It cannot be undone.

Small dialog

Narrow, for short confirmations.

Maximum width 24rem.

Large dialog

Wide, for richer content.

Maximum width 48rem.

Terms of service

The body scrolls on its own.

Section 1. Scrolling content stays inside the body while the title and actions remain visible.

Section 2. Scrolling content stays inside the body while the title and actions remain visible.

Section 3. Scrolling content stays inside the body while the title and actions remain visible.

Section 4. Scrolling content stays inside the body while the title and actions remain visible.

Section 5. Scrolling content stays inside the body while the title and actions remain visible.

Section 6. Scrolling content stays inside the body while the title and actions remain visible.

Section 7. Scrolling content stays inside the body while the title and actions remain visible.

Section 8. Scrolling content stays inside the body while the title and actions remain visible.

Section 9. Scrolling content stays inside the body while the title and actions remain visible.

Section 10. Scrolling content stays inside the body while the title and actions remain visible.

Section 11. Scrolling content stays inside the body while the title and actions remain visible.

Section 12. Scrolling content stays inside the body while the title and actions remain visible.

Native behavior

  • The browser provides the top layer, the backdrop, the inert page behind, Escape to close, and focus return.
  • <form method="dialog"> closes the dialog on submit and sets returnValue to the submit button's value.
  • The body scrolls on its own; the title and actions stay visible. Page scroll is locked while open.
  • Under 30rem of dialog width the footer buttons stack with the primary on top.
  • Motion is a short fade and scale, removed under prefers-reduced-motion: reduce.

Foundation versus Bit

The foundation does not style <dialog>. data-bitsy-dialog adds the window surface, the backdrop, the parts, the sizes, scroll lock, and motion. Plain <dialog> elements elsewhere keep the browser defaults. Dialog ships no JavaScript.

Bitsy UI is MIT licensed. Source on GitHub.