Toast

A toast says what just happened and then leaves. It stacks at the bottom right and goes after four seconds. Use a callout instead for a note that should stay.

Basic

<menu>
  <li><button data-toast="Config saved" data-toast-tone="go">Save config</button></li>
  <li><button data-variant="line" data-toast="Build cache cleared" data-toast-tone="stop">Clear the cache</button></li>
  <li><button data-variant="line" data-toast="Copied to clipboard">Copy</button></li>
</menu>

data-toast is the text and data-toast-tone is the tone; leave the tone out for the quiet one.

From script

<button onclick="S72.toast('182 pages deployed', 'go')">Deploy</button>

S72.toast(text, tone, ms) takes an optional lifetime in milliseconds, which defaults to 4000.

Notes

• The stack is built on first use as a [data-toasts] element with aria-live="polite"; each toast carries role="status".
• A toast is a callout in that stack, so it takes the same tones and the same shape.
• It rises in over 220 ms, which is the only motion: there is no exit animation to wait on.