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
<button class="vt-btn vt-btn-bordered" onclick="showToast('default')">
Default
</button>
<button class="vt-btn vt-btn-bordered" onclick="showToast('success')">
Success
</button>
<button class="vt-btn vt-btn-danger" onclick="showToast('error')">
Error
</button>
<button class="vt-btn vt-btn-primary" onclick="showToast('action')">
With Action
</button>Static Previews
All toast variants inline.
html
Scheduled: Catch up
Friday, February 14, 2026 at 5:57 PM
Success
Your changes have been saved.
Error
Something went wrong. Please try again.
<div class="vt-toast">
<div class="vt-flex-1"><p class="vt-text-sm vt-font-semibold">Scheduled: Catch up</p><p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Friday, February 14, 2026 at 5:57 PM</p></div>
<button class="vt-btn vt-btn-bordered vt-btn-sm vt-flex-shrink-0">Undo</button>
</div>
<div class="vt-toast">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-text-success-fill vt-flex-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
</svg>
<div class="vt-flex-1"><p class="vt-text-sm vt-font-semibold">Success</p><p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Your changes have been saved.</p></div>
</div>
<div class="vt-toast vt-border-error-fill/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-alert vt-w-5 vt-h-5 vt-text-error-fill vt-flex-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>
</svg>
<div class="vt-flex-1"><p class="vt-text-sm vt-font-semibold">Error</p><p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Something went wrong. Please try again.</p></div>
<button class="vt-btn vt-btn-bordered vt-btn-sm vt-flex-shrink-0">Retry</button>
</div>Guidelines
Transient feedback after an action (saved, copied, failed) — auto-dismisses. NOT persistent information → alert or banner.
Saved
Your changes have been saved.
Do
Terms updated
Our policy has changed. Please review the full document, adjust your preferences, and re-accept before continuing.
Don't
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-fill/50 |
Modifier | Red border override for error/destructive toasts |
vt-text-success-fill |
Color | Success icon color |
vt-text-error-fill |
Color | Error icon color |
vt-fixed vt-bottom-4 vt-right-4 vt-z-50 |
Layout | Fixed position container for live toasts |
vt-text-foreground-muted |
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 |