Toast

A toast is a brief message that slides in and clears itself. The CSS handles the slide; a few lines of script add one and remove it after a pause.

<button onclick="toast('Saved!')">Show toast</button>
<div class="toasts"></div>

A button that raises a toast

A toast JavaScript

Keep one toasts region on the page. The script builds a toast, adds it, and removes it after a moment; the CSS animates it in and out. Click the button to try it.

<button onclick="toast('Saved!')">Show toast</button>
<div class="toasts"></div>

A button that raises a toast

function toast(message) {
  const region = document.querySelector('.toasts');
  const el = document.createElement('div');
  el.className = 'toast';
  el.textContent = message;
  region.append(el);
  setTimeout(function () {
    el.classList.add('out');
    el.addEventListener('animationend', function () { el.remove(); });
  }, 2600);
}

Add a toast, then remove it after a moment