Internal QA/reference page for the canonical LAGO toast system. Every trigger fires the real production component through the live viewport. Not linked from any product navigation.
DS-011 LagoToast provides concise, non-blocking feedback about completed actions, neutral updates, warnings, and recoverable failures. Toasts are not modals — they never block background work or steal focus.
Experience saved
Your draft has been stored.
Unable to publish experience
Payout setup is required.
A LagoToast is a white surface with a 1px neutral border, 12px radius, and restrained elevation. Severity is carried by a semantic icon, a 4px left accent bar, and a live-region role — never by colour alone.
New booking received
Booking #1042 from Alex Carter for Muskoka Sunset Cruise.
Four severity variants. Each fires a real toast through the live viewport (bottom-right on desktop, full-width on mobile).
Optional description, recovery action, dismissible vs persistent, and stacking.
A maximum of 3 toasts are visible at once. Additional toasts are queued (FIFO) and promoted automatically as visible toasts dismiss or expire. A subtle "+N more queued" indicator appears below the stack.
Desktop: bottom-right, 420px max. Mobile: full viewport width with safe margins. Long titles and descriptions wrap safely — no horizontal overflow, no clipping.
Validate at 1534, 1024, 768, 430, 390, 375, and 320px. The toast stays within the viewport with safe margins at every breakpoint.
Success and information use role="status" (polite). Warning and error use role="alert" (assertive). The dismiss control is keyboard accessible with an aria-label. Focus is never moved into the toast, and no focus trap is created. Meaning never relies on colour alone.
With OS reduced-motion enabled, entrance/exit animations are reduced to a short fade while all functionality (dismiss, actions, queueing) is preserved.