1. Docs
2. Components
3. Feedback
4. Toasts

Toasts 1.2.2

<velin-toast> is a fixed, stacking notification host. Call show({ message, type, duration }) to push dismissible toasts. Stable feedback overlay adjacent to modal/dialog patterns in 1.2.0 (does not use focus-manager inert — toasts are non-modal). Deutsch: Toasts De

When to use

• Transient success, info, warning, or error feedback after an action.
• When the user should keep interacting with the page (no focus trap).

When not

• Decisions that require a response — use Dialog or Modal.
• Do not treat child text or an open attribute as the show API — messages are created via show().

Basic toast

Place one host on the page. Invoke show() from JavaScript.

<velin-toast id="toasts"></velin-toast>

<button type="button" class="velin-btn velin-btn--primary"
        onclick="document.getElementById('toasts').show({
          message: 'Hello! This is a toast message.',
          type: 'info'
        })">
  Show toast
</button>

Types

Pass type to show(): info (default), success, warning, danger, or error (assertive live region like danger).

const t = document.getElementById('toasts');
t.show({ message: 'Changes saved!', type: 'success' });
t.show({ message: 'Something went wrong.', type: 'danger' });
t.show({ message: 'Check your input.', type: 'warning' });
t.show({ message: 'New update available.', type: 'info' });

Auto-dismiss

duration is milliseconds (default 5000). Use 0 to keep the toast until the close button is pressed.

t.show({ message: 'Quick notification', duration: 3000 });
t.show({ message: 'Persistent toast', duration: 0 });

Stacking

Multiple show() calls append toast nodes inside the same host. The host is fixed at the block-end / inline-end corner and stacks with flex-direction: column-reverse.

<!-- One host is enough — do not invent .velin-toast-container -->
<velin-toast id="toasts"></velin-toast>

Accessibility

• Host defaults to role="status", aria-live="polite", aria-atomic="true".
• For type: 'danger' or 'error', host and toast use role="alert" and aria-live="assertive".
• Each toast has a close button with aria-label="Close".
• Messages are HTML-escaped. Toasts do not trap focus or lock scroll.

Dark, responsive, motion, RTL

• Dark / themes: surface, border, and semantic border-inline-start colors.
• Responsive: max-inline-size: min(24rem, calc(100vw - 2rem)); positioned with logical inset properties.
• Motion: enter/exit animations skipped under prefers-reduced-motion: reduce.
• RTL: host uses inset-inline-end; type accent uses border-inline-start.

API

Methods

CSS variables

Best practices & pitfalls

• Use a single page-level <velin-toast> host.
• There is no velin-close event and no observed open/type/duration attributes on the host.
• Keep messages short; prefer Dialog when the user must confirm.

Related

• Alerts — in-page status banners
• Dialog — blocking confirmations
• Announcer — live region utility