Dialog

Modal dialog using the native <dialog> element. Requires the nanoui-dialog Stimulus controller.

Default

Preview

Edit Profile

Make changes to your profile here.

 
<div data-controller="nanoui-dialog">
  <div class="nano-dialog__trigger" data-action="click->nanoui-dialog#open">
    <button class="nano-btn nano-btn--primary">Open Dialog</button>
  </div>

  <dialog class="nano-dialog"
          data-nanoui-dialog-target="modal"
          data-action="click->nanoui-dialog#clickBackdrop cancel->nanoui-dialog#cancel"
          aria-labelledby="dialog-title">
    <div class="nano-dialog__content">
      <header class="nano-dialog__header">
        <h2 id="dialog-title" class="nano-dialog__title">Edit Profile</h2>
        <p class="nano-dialog__description">Make changes to your profile.</p>
      </header>

      <div class="nano-dialog__body">
        <!-- form content -->
      </div>

      <footer class="nano-dialog__footer">
        <button class="nano-btn nano-btn--outline"
                data-action="nanoui-dialog#close">Cancel</button>
        <button class="nano-btn nano-btn--primary">Save</button>
      </footer>

      <button class="nano-dialog__close"
              data-action="nanoui-dialog#close"
              aria-label="Close dialog">&times;</button>
    </div>
  </dialog>
</div>

Size variants

Preview

Confirm

Are you sure you want to continue?

Default dialog

This is the default 32rem width.

Large dialog

This is the large 42rem width, great for forms.

 
<dialog class="nano-dialog nano-dialog--sm">...</dialog>
<dialog class="nano-dialog">...</dialog>
<dialog class="nano-dialog nano-dialog--lg">...</dialog>
<dialog class="nano-dialog nano-dialog--full">...</dialog>

Stimulus controller

The nanoui-dialog controller provides:

  • Targets: modal (the <dialog> element)
  • Actions: open(), close(), clickBackdrop(event), cancel(event)
  • Opens with showModal() for proper focus trapping and backdrop
  • Escape key closes via native cancel event