Toast

feedback

Temporary notification toast/snackbar with variant icons (success/warning/error/info), auto-dismiss progress bar, close button, stacking container, and ARIA live regions. Fundamental feedback primitive for pipeline events, brain sync status, and system alerts.

Import

typescript
import { Toast } from "packages/ui/src";

Props

ToastProps

PropTypeRequired
toastToastItemYes
onDismiss(id) => void) + ToastContainerProps (toasts: ToastItem[], onDismiss?, position?: top-right|top-left|bottom-right|bottom-leftNo

Examples

Toast / Snackbar

Temporary notification system with variant icons, auto-dismiss progress, stacking container, and ARIA live regions. 20th shared component — 16 dedicated tokens.

Interactive Playground

Operation succeeded

This is a detailed description of the notification.

All Variants

Success notification

This is a success toast with a description.

Warning notification

This is a warning toast with a description.

Info notification

This is a info toast with a description.

With Auto-Dismiss Progress

Auto-dismissing

Progress bar shows remaining time.

Stacked Container (Live)

Container area — toasts stack in the top-right corner.

Pipeline complete

All 5 stages passed — tokens, component, route, tests, deploy.

Token drift detected

2 unused tokens found in ProgressBar component.

New source uploaded

NotebookLM source 'Session Handoff' now STATUS_COMPLETE.

Real-World Use Cases

Pipeline Notifications

Token build complete

360 tokens compiled to CSS.

Brain Sync Status

Design Drift Alert

Drift score: 99.84

1 unused token in ProgressBar.

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionTemporary notification toast/snackbar with variant icons (success/warning/error/info), auto-dismiss progress bar, close button, stacking container, and ARIA live regions. Fundamental feedback primitive for pipeline events, brain sync status, and system alerts.
PropsToastProps (toast: ToastItem, onDismiss?: (id) => void) + ToastContainerProps (toasts: ToastItem[], onDismiss?, position?: top-right|top-left|bottom-right|bottom-left)
Statessuccess, warning, error, info, with-description, with-progress, dismissible
A11y
  • role=alert for error variant
  • role=status for non-error variants
  • aria-live=assertive for errors, polite for others
  • Close button has aria-label
  • Container has aria-label
Responsive
  • Max-width 400px
  • Full-width on small viewports
  • Stacks vertically
Motion
  • Enter animation 250ms ease-out
  • Progress bar linear shrink
Token Dependencies
  • components.toast.background
  • components.toast.borderRadius
  • components.toast.padding
  • components.toast.shadow
  • components.toast.textColor
  • components.toast.descriptionColor
  • components.toast.closeColor
  • components.toast.closeHoverColor
  • components.toast.iconSuccess
  • components.toast.iconWarning
  • components.toast.iconError
  • components.toast.iconInfo
  • components.toast.progressTrack
  • components.toast.progressFill
  • components.toast.maxWidth
  • components.toast.gap
Content Slotstoast.title (string), toast.description (string)
CMS Bindings
  • Notification content from CMS event system
  • Variant from CMS config
Test Cases
  • Renders title
  • Renders description when provided
  • Applies variant class
  • Shows variant icon
  • Shows close button when onDismiss provided
  • Calls onDismiss with toast id
  • Shows progress bar when duration set
  • Container renders multiple toasts
  • Uses role=alert for error variant