Toast

Toast notifications display brief, auto-dismissing messages in the corner of the screen.

States

Toast supports five semantic states. Each state uses a distinct colour and icon.

<diwa-toast id="toast"></diwa-toast>

<script>
  const toast = document.getElementById('toast');
  // state: 'neutral' | 'success' | 'error' | 'warning' | 'info'
  toast.addMessage({ text: 'Changes saved.', state: 'success' });
</script>

Custom duration

The default duration is 5 000 ms. Set duration to control how long the toast stays visible. A value of 0 disables auto-dismiss — the user must close manually.

<script>
  // 2-second auto-dismiss
  toast.addMessage({ text: 'Disappears in 2 s.', state: 'info', duration: 2000 });

  // Persistent — user must dismiss manually
  toast.addMessage({ text: 'Stays until closed.', state: 'warning', duration: 0 });
</script>

Multiple messages

Multiple toasts stack vertically. Each can be dismissed independently.

<script>
  // Stagger calls to produce a stack of independent toasts
  toast.addMessage({ text: 'First message.', state: 'neutral' });
  setTimeout(() => toast.addMessage({ text: 'Second message.', state: 'success' }), 300);
  setTimeout(() => toast.addMessage({ text: 'Third message.', state: 'info' }), 600);
</script>