Component

Dialog

A modal dialog that becomes a bottom sheet below 560px, with a backdrop, grabber and action row.

Preview

Code

<button class="btn primary" data-mw-dialog="#demo-dialog">Open dialog</button>
<dialog id="demo-dialog">
  <div class="sheet">
    <div class="grabber"></div>
    <p class="eyebrow">Confirm</p>
    <h3>Approve this print job?</h3>
    <p class="lede">The job will be queued on Prusa MK4 and the student notified.</p>
    <div class="btn-row end">
      <button class="btn" data-mw-close>Cancel</button>
      <button class="btn primary" data-mw-close data-mw-toast="Job approved.">Approve</button>
    </div>
  </div>
</dialog>

This component is interactive — include behaviors.js after your markup.

← Code Plate Divider →