The basics

<div class="demo demo--wide">
  <div class="demo-row">
    <button class="demo-btn" data-toast="default">Message</button>
    <button class="demo-btn" data-toast="success">Success</button>
    <button class="demo-btn" data-toast="error">Error</button>
    <button class="demo-btn" data-toast="warning">Warning</button>
    <button class="demo-btn" data-toast="info">Info</button>
  </div>
  <div class="demo-row">
    <button class="demo-btn" id="undo">With an Undo action</button>
    <button class="demo-btn" id="sticky">Until dismissed</button>
    <button class="demo-btn" id="clear">Dismiss all</button>
  </div>
  <p class="demo-hint">Hover a toast to hold it; move away and the countdown carries on.</p>
</div>

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

// Inside this demo frame, keep the toasts where you can see them.
configure({ position: 'bottom-center' });

const MESSAGES = {
  default: ['Draft saved', 'Last edited just now'],
  success: ['Invoice sent', 'Aisha will get it in a moment.'],
  error: ['Could not send', 'The address was rejected.'],
  warning: ['Almost out of credit', '2 messages left this month.'],
  info: ['A new version is available', 'Reload when you are ready.'],
};

document.querySelectorAll('[data-toast]').forEach((button) => {
  button.addEventListener('click', () => {
    const type = button.dataset.toast;
    const [title, description] = MESSAGES[type];
    (type === 'default' ? toast : toast[type])(title, { description });
  });
});

document.getElementById('undo').addEventListener('click', () => {
  toast('Message deleted', {
    duration: 8000,
    action: { label: 'Undo', onClick: () => toast.success('Message restored') },
    cancel: { label: 'Dismiss' },
  });
});

document.getElementById('sticky').addEventListener('click', () => toast.info('This one waits for you', { duration: 0 }));
document.getElementById('clear').addEventListener('click', () => toast.dismiss());

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