NS Design System
v3.0.0 · 257 tokens

61Modal

Built on

and opened with showModal() — the focus trap, inert background, Esc handling and top layer come from the platform, not from hand-written JS. Footer actions end-aligned, confirm last.

Use it for

  • A decision that blocks the flow; a focused sub-task

Not for

  • Content that could be a page — modals are where content goes to be lost
  • Non-blocking panels — Drawer

Live demo

Click to open — Esc, the ✕ and the backdrop all close it.

Reset this lesson?

Your quiz score and notes for this lesson will be cleared. Course progress is kept.
markup
<div>
<button class="ns-btn ns-btn--outline" data-open>Open modal</button>
<dialog class="ns-modal" aria-labelledby="dm-t">
  <div class="ns-modal__header">
    <div><h2 class="ns-modal__title" id="dm-t">Reset this lesson?</h2></div>
    <button type="button" class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm ns-modal__close" aria-label="Close dialog" data-close>
      <i class="ph ph-x" aria-hidden="true"></i></button>
  </div>
  <div class="ns-modal__body"><p style="padding-block-end:var(--space-4)">Your quiz score and notes for this lesson will be cleared. Course progress is kept.</p></div>
  <div class="ns-modal__footer">
    <button class="ns-btn ns-btn--outline" data-close autofocus>Cancel</button>
    <button class="ns-btn ns-btn--danger-solid">Reset lesson</button>
  </div>
</dialog>
</div>

Accessibility contract

  • aria-labelledby ties the title to the dialog; focus returns to the trigger on close
  • In a destructive confirm, Cancel is focused first — Enter must never destroy