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.

Add this component

The command below includes <strong>Toast</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live Examples

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>

Other frameworks: Astro · Svelte · Vue · React