Toast

Non-disruptive notifications using <output role="status"> and @utility toast-* classes.

Update available
A new software version is ready.

Usage

toast.html
<output role="status" class="toast">
  <div class="toast-content">
    <div class="toast-title">Update available</div>
    <div class="toast-description">A new software version is ready.</div>
  </div>
  <button class="toast-action">Reload</button>
</output>