NS Design System
v3.0.0 · 257 tokens

137Publish bar

The sticky strip at the foot of a creation screen: the mono save state on the left (a timestamp, not a toast), draft/publish actions on the right. role=status announces saves quietly.

Use it for

  • Course and lesson editors — anywhere work can be lost

Not for

  • List screens — nothing to save there

Draft state

Draft saved 14:32:07
markup
<div class="ns-publishbar" style="position:static;margin-inline:0;inline-size:100%">
  <span class="ns-publishbar__state" role="status"><span class="ns-status ns-status--idle">Draft</span> saved 14:32:07</span>
  <div class="ns-publishbar__actions">
    <button class="ns-btn ns-btn--outline">Save draft</button>
    <button class="ns-btn ns-btn--primary"><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-publish"/></svg> Publish</button>
  </div>
</div>