Toast

Severity

Notifications disappear after five seconds. Hover over a toast or focus its controls to pause the timer.

Position

Multiple and sticky

Template and headless

Use #message to replace the content or #headless for a fully custom card. Both receive the message and a closeFn callback.

Usage and API

import { AvToast, AvToastService } from 'avero-ui';

// Mount one outlet in your application shell:
<av-toast position="top-right" />

// Inject the service in a component:
private readonly toast = inject(AvToastService);
this.toast.add({ severity: 'success', summary: 'Saved', detail: 'Changes saved.', life: 5000 });
this.toast.addAll([{ summary: 'First' }, { summary: 'Second' }]);
this.toast.clear();

AvToast inputs: key (empty by default), position (top-right), life (5000 ms) and closeAriaLabel. onClose emits the message and a reason: close, timeout or clear.

Messages accept key, severity, summary, detail, life, sticky, closable and data. addAll preserves message order. clear() clears all outlets; clear(key) clears one channel. A message is shown only by mounted outlets whose key matches; messages are not queued before an outlet exists. Use one outlet per key and the same service instance for the outlet and its callers.

Errors use role="alert"; other messages use role="status". Opening does not move focus. Close buttons support Enter and Space. Focus and hover independently pause expiry; important information should use sticky messages. Headless templates must supply their own accessible close action.

The outlet uses the native popover top layer where available and a fixed-position fallback. Width adapts to the viewport; long stacks scroll. Reduced motion is respected. Configure --av-toast-width and --av-toast-z-index (fallback); standard cards also use Message theme variables.