Toast — uicraft

Trigger Toasts

Click buttons to see live toast notifications.

html

<div class="uc-flex uc-items-start uc-gap-3 uc-p-4 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-sm">
  <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-flex uc-items-start uc-gap-3`	Layout	Horizontal layout for icon, content, and action
`uc-p-4 uc-rounded-lg`	Style	Padding and rounded corners for toast card
`uc-border-border-default`	Style	Default border for standard toasts
`uc-border-accents-red/50`	Style	Red border for error toasts
`uc-bg-neutrals-surface`	Color	Surface background color
`uc-shadow-sm`	Style	Subtle shadow for elevation
`uc-shadow-lg`	Style	Larger shadow for floating 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