Toast
A succinct message that is displayed temporarily.
Interactive
Requires:
uicraft.js
JS init: automatic
Trigger Toasts
Click buttons to see live toast notifications.
html
<div class="uc-toast">
<div class="uc-flex-1">
<p class="uc-text-sm uc-font-semibold">Title</p>
<p class="uc-text-xs uc-text-fg-disabled">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 |
|---|---|---|
uc-toast |
Component | Semantic toast class — flex layout, gap, padding, rounded corners, border, surface background, and shadow |
uc-border-accents-red/50 |
Modifier | Red border override for error/destructive toasts |
uc-text-accents-blue |
Color | Success icon color |
uc-text-accents-red |
Color | Error icon color |
uc-fixed uc-bottom-4 uc-right-4 uc-z-50 |
Layout | Fixed position container for live toasts |
uc-text-fg-disabled |
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 |