Toast — Vanilla

Toast notifications with vanilla HTML. Use window.showToast when provided by your layout.

Toast

Fixed-position notifications. On this site window.showToast is provided by the layout. For your own app, implement a toast util or use the layout pattern.

Live example

HTML

html html 
<div class="toast-container toast-container--top-right">
  <div class="alert alert--info">Static toast message.</div>
</div>
<button type="button" class="btn btn-success" onclick="window.showToast && window.showToast('Saved!', { variant: 'success' })">Show success</button>
<button type="button" class="btn btn-error" onclick="window.showToast && window.showToast('Error.', { variant: 'error' })">Show error</button>

Astro / Svelte: Astro · Svelte