Toast Notifications

Brief, non-blocking notifications triggered imperatively with the useToast composable, in contextual success, error, warning, and info styles.

Toast Types
import { useToast } from "@vanduo-oss/vd3";
const toast = useToast();

toast.success('Operation completed successfully!');
toast.error('An error occurred!');
toast.warning('Please review your input.');
toast.info('Here is some information.');
Toast Options
const toast = useToast();

// Toast with title
toast.show({ title: 'With Title', message: 'This toast has a title and message.', type: 'info' });

// Long duration (10 seconds)
toast.show({ message: 'This toast will stay for 10 seconds.', type: 'success', duration: 10000 });

// Custom position
toast.show({ message: 'Bottom left position.', type: 'warning', position: 'bottom-left' });

Toast API Reference

Toasts are generated dynamically via JavaScript. The configuration object accepts the following fields:

PropertyDescriptionDefault / Type
messageThe main text content displayed in the toast notification.string (required)
titleAn optional bolder heading displayed above the message.string
typeVisual variant (success, error, warning, info).info
durationTime in milliseconds before the toast automatically dismisses.5000
positionScreen placement (e.g., top-right, bottom-left).top-right
v1.4.1 sanitizes toast title and message HTML with inline styles disabled for framework call sites. Prefer plain text strings for user-provided notification content.