Toasts
Transient notifications anchored to the bottom-right corner — four tones, optional action, auto-dismiss. Built on the Portal-based Toast component (z-130).
Tones
Click to spawn a toast in the bottom-right corner
Auto-Dismiss
Toggle the timer that hides the toast automatically
When auto-dismiss is off, toasts persist until the user clicks the close button. Useful for critical errors that need acknowledgment.
With Action
Inline undo / retry button
Action buttons appear under the description. Clicking them dismisses the toast and runs the handler — perfect for undoing destructive actions.
Persistent Toast
No auto-dismiss until user closes it
Uses duration: 999999 to keep the toast on screen. Useful for connection-loss or critical errors.
Queue & Order
Toasts appear one at a time — newest replaces previous
The shared Toast component shows one toast at a time. Triggering a new toast while one is visible replaces it immediately. This demo uses setTimeout to queue three toasts sequentially.
Anatomy & Tips
What makes a great toast
Duration
4s default. Use 6s+ for toasts with actions so the user has time to read & react.
One action
Toasts are ephemeral — keep to a single, optional action. Anything more belongs in a modal.
Accessibility
The close button has aria-label. Wrap the trigger region in aria-live="polite" if needed.
Avoid spam
If the same event fires repeatedly, replace the existing toast instead of stacking duplicates.
Active Toast
Currently on screen