Toast
A succinct message that is displayed temporarily.
Interactive
Requires:
veritheme.js
JS init: automatic
Trigger Toasts
Click buttons to see live toast notifications.
html
<div class="vt-toast">
<div class="vt-flex-1">
<p class="vt-text-sm vt-font-semibold">Title</p>
<p class="vt-text-xs vt-text-mains-quaternary">Description</p>
</div>
<button>Undo</button>
</div>Static Previews
All toast variants inline.
Scheduled: Catch up
Friday, February 14, 2026 at 5:57 PM
Success
Your changes have been saved.
Error
Something went wrong. Please try again.
API Reference
All CSS classes available for the Toast component.
| Class | Type | Description |
|---|---|---|
vt-toast |
Component | Semantic toast class — flex layout, gap, padding, rounded corners, border, surface background, and shadow |
vt-border-error-primary/50 |
Modifier | Red border override for error/destructive toasts |
vt-text-info-primary |
Color | Success icon color |
vt-text-error-primary |
Color | Error icon color |
vt-fixed vt-bottom-4 vt-right-4 vt-z-50 |
Layout | Fixed position container for live toasts |
vt-text-mains-quaternary |
Color | Subdued description and close button color |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Role | Use role="status" for info toasts, role="alert" for errors |
| Live region | Toast container uses aria-live="polite" for non-urgent messages |
| Dismiss | Close button should have aria-label="Dismiss notification" |
| Focus | Toasts should not steal focus from the current task |
| Auto-dismiss | Provide enough time to read (5s minimum), pause on hover |