Toasts

The <velin-toast> web component provides lightweight, dismissible notifications with type variants, auto-dismiss timers, and automatic stacking.

Basic toast

Hello! This is a toast message.

<velin-toast open>Hello! This is a toast message.</velin-toast>

Types

Set the type attribute to success, danger, warning, or info.

<velin-toast type="success" open>Changes saved!</velin-toast>
<velin-toast type="danger"  open>Something went wrong.</velin-toast>
<velin-toast type="warning" open>Check your input.</velin-toast>
<velin-toast type="info"    open>New update available.</velin-toast>

Auto-dismiss

Set duration (in milliseconds) to auto-close the toast. Default is 5000. Use 0 to keep it open.

<!-- Closes after 3 seconds -->
<velin-toast duration="3000" open>Quick notification</velin-toast>

<!-- Stays until manually dismissed -->
<velin-toast duration="0" open>Persistent toast</velin-toast>

Stacking

Multiple toasts stack automatically in a .velin-toast-container region. Position it with utility classes.

<div class="velin-toast-container position-fixed bottom-0 end-0 p-3">
  <velin-toast type="info" open>First toast</velin-toast>
  <velin-toast type="success" open>Second toast</velin-toast>
</div>

JavaScript API

const toast = document.createElement('velin-toast');
toast.textContent = 'Created via JS';
toast.setAttribute('type', 'success');
toast.setAttribute('open', '');
document.querySelector('.velin-toast-container').append(toast);