The stack

<div class="demo demo--wide">
  <div class="demo-row">
    <button class="demo-btn" id="burst">Send eight at once</button>
    <button class="demo-btn" id="clear">Dismiss all</button>
  </div>
  <div class="demo-field">
    <label class="demo-label" for="max">On screen at once: <b id="maxValue">3</b></label>
    <input id="max" type="range" min="1" max="5" value="3">
  </div>
  <div class="demo-seg" id="positions">
    <button type="button" data-position="bottom-right" class="is-active">bottom-right</button>
    <button type="button" data-position="bottom-center">bottom-center</button>
    <button type="button" data-position="top-center">top-center</button>
    <button type="button" data-position="top-right">top-right</button>
  </div>
  <p class="demo-hint">Hover the stack to fan it out. Everything past the limit waits its turn.</p>
</div>

import { toast, configure } from 'https://www.devix.pk/cdn/oss/toast@1.0.0/index.js';

configure({ position: 'bottom-right', max: 3, duration: 5000 });

const WORK = ['Invoice #1041 sent', 'Invoice #1042 sent', 'Payment received', 'Backup finished', 'Report ready', 'Export finished', 'User invited', 'Webhook delivered'];

document.getElementById('burst').addEventListener('click', () => {
  WORK.forEach((message, index) => setTimeout(() => toast.success(message), index * 120));
});
document.getElementById('clear').addEventListener('click', () => toast.dismiss());

const max = document.getElementById('max');
max.addEventListener('input', () => {
  document.getElementById('maxValue').textContent = max.value;
  configure({ max: Number(max.value) });
});

document.getElementById('positions').addEventListener('click', (event) => {
  const button = event.target.closest('button[data-position]');
  if (!button) return;
  for (const other of document.querySelectorAll('#positions button')) other.classList.toggle('is-active', other === button);
  configure({ position: button.dataset.position });
  toast(`Now at ${button.dataset.position}`);
});

@import url('https://www.devix.pk/cdn/oss/toast@1.0.0/toast.min.css');