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:
| Property | Description | Default / Type |
|---|---|---|
message | The main text content displayed in the toast notification. | string (required) |
title | An optional bolder heading displayed above the message. | string |
type | Visual variant (success, error, warning, info). | info |
duration | Time in milliseconds before the toast automatically dismisses. | 5000 |
position | Screen 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.