33Toast

Transient confirmation. Success auto-dismisses; errors never do — a message that vanishes before it is read is worse than none. Actionable errors do not belong here at all: a toast is unreachable once gone.

Use it for

"Progress saved", "Link copied" — confirmations of success

Not for

Errors the user must fix — Alert, next to the thing that failed

Tones

Progress saved

Link copied to clipboard

markup

<div class="ns-toast ns-toast--success" style="position:static">
  <span class="ns-toast__text">Progress saved</span>
  <button class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" aria-label="Dismiss"><i class="ph ph-x" aria-hidden="true"></i></button>
</div>
<div class="ns-toast" style="position:static">
  <span class="ns-toast__text">Link copied to clipboard</span>
  <button class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" aria-label="Dismiss"><i class="ph ph-x" aria-hidden="true"></i></button>
</div>

Accessibility contract

The live region mounts empty at app start; messages are inserted later — a region created with its message announces nothing (ToastProvider handles this)