Surfaces
Toaster
Root-level container that renders Toast notifications driven by the global toaster store.
Loading playground
Overview
Toaster is the container that renders Toast notifications. Mount it once at the app root and any component can trigger toasts through the global store without passing props.
The viewport carries a .toaster__viewport class with position modifiers (--top-right, --bottom-center, etc.) so you can theme placement from CSS.
Key Business & UX Benefits
- One mount at the root means any component (cart, checkout, account) can fire a toast, so feedback never depends on prop drilling or per-page wiring.
- CSS-driven viewport placement lets brand teams adjust toast location for each market or campaign without touching application code.
- A single global queue prevents stacked toasts from competing for attention, keeping the screen readable during multi-action flows like bulk operations.
- The toaster pattern frees product engineers from rebuilding notification plumbing on every feature, shortening time-to-ship for new flows.
Pro-Tip from Larry: Mount Toaster once at the root so toasts always appear in the same spot, regardless of which route triggered them.
Usage
LToaster
Feature List
- Reads from a global toaster store, so any component fires toasts without prop drilling or page-level wiring
- `.toaster__viewport` carries position modifiers (`--top-right`, `--bottom-center`, etc.), so consumers theme placement from CSS
- Single mount at the app root is the only setup, the rest is just calling the store
- Renders each store entry as a `Toast` instance, so per-toast variant, duration, and ctas come through unchanged
- Queue management prevents stacked toasts from competing for attention during multi-action flows
API Reference
| Prop | Default | Type |
|---|---|---|
position | top right | "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" |
enabled | true | boolean |
queueLimit | number |
| Slot | Type |
|---|---|
default | {} |