Toast
Non-blocking notifications triggered via a global store. Supports intents, auto-dismiss, progress bars, and custom placements.
01 Examples
All Intents
Title Only
Progress Bar
Custom Duration
Non-Dismissible
Programmatic Dismiss & Clear
Document Editor
Document Editor
Start typing your document…
02 Customization
slotClasses Override
Toaster Store API
03 Accessibility
Live Region
The Toaster container uses aria-live="polite" with aria-relevant="additions removals". Screen readers
announce new toasts without interrupting the current task.
Alert Role
Each individual toast is rendered with role="alert", ensuring assistive technologies
surface the notification promptly.
Keyboard
Dismiss buttons are focusable via Tab and activate with Enter / Space. The dismiss button has an aria-label="Dismiss".
Focus Management
Toasts use pointer-events-none on the container so they
never block interaction with the underlying page. Only the dismiss button within each toast
captures pointer events.
Reduced Motion
Fly transitions use the system's duration tokens. The
progress bar animation uses a linear timing function that remains functional under reduced motion
preferences.
04 API Reference
No matching properties |
05 Types
Store & Type Definitions
Types for the toaster store API. ToastInput defines what you pass to toaster.add(), the shorthand methods accept ToastShorthandOpts.
No data available |