Preview
Code
VUE
<Toast />Props
The notification message text
Semantic color variant
Optional bold title above the message
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
message | string | "Action completed successfully" | — | The notification message text |
variant | select"success" | "error" | "warning" | "info" | "success" | — | Semantic color variant |
title | string | "" | — | Optional bold title above the message |
Usage
Use toasts for brief, non-blocking feedback about background processes or actions. Do not use them for critical errors — use an inline Alert instead. Keep messages under 80 characters.
Accessibility
Uses role="alert" (assertive) for errors, role="status" (polite) for all other variants.
Auto-dismiss respects a minimum display time to ensure readability.
The dismiss button has an aria-label for screen reader users.