Skip to main content

Toast

Edge-positioned notification that stacks and auto-dismisses. Distinct from HUD (centered, one-at-a-time).

Selectors

.toast-container
Fixed region at top-right (bottom on mobile). Auto-created by showToast.
.toast
Individual notification. Set data-variant="success|error" for accent colour.
window.showToast(titleOrOptions)
Imperative API. Returns { dismiss, element }.

Basic

HTML 
<button class="btn-tinted" onclick="showToast('Saved successfully')">Show toast</button>

With message + variant

HTML 
<div class="flex flex-wrap gap-2">
  <button class="btn-tinted" onclick="showToast({ title: 'Changes saved', message: 'Your settings were updated.', variant: 'success' })">Success</button>
  <button class="btn-tinted" onclick="showToast({ title: 'Upload failed', message: 'File too large (max 10MB).', variant: 'error' })">Error</button>
  <button class="btn-tinted" onclick="showToast({ title: 'Syncing...', message: 'Finishing up, please wait.' })">Info</button>
</div>

Sticky (no auto-dismiss)

HTML 
<button class="btn-tinted" onclick="showToast({ title: 'Action required', message: 'Dismiss manually.', duration: 0 })">Sticky</button>

API

// Short form — just a title
showToast("Saved");

// Full form
showToast({
  title: "Changes saved",
  message: "Your settings were updated.",
  variant: "success",    // "info" (default) | "success" | "error"
  duration: 4000,        // ms; 0 = sticky
});

Accessibility

  • Container has role="region" and aria-live="polite" so screen readers announce new toasts without stealing focus.
  • Error toasts use role="alert" for more assertive announcement.
  • Dismiss button has aria-label="Dismiss notification".
  • Respects prefers-reduced-motion — slide-in collapses to a quick fade.

Toast vs HUD

  • HUD: centered on screen, one-at-a-time, very short duration. Inspired by macOS volume/brightness overlays.
  • Toast: edge corner, stacks, persistent until dismissed or timer expires. Standard web notification pattern.