Toast

Brief non-blocking notification appearing bottom-right. Four status variants (info, success, warning, danger) plus neutral — the actionable flavor: a floating elevated-surface pill for events that carry an Undo rather than a status. Auto-dismiss after 5 seconds by default. Use for transient confirmations (saved, copied) or non-blocking errors — the warning and danger variants still announce assertively. For critical errors use Banner or Modal.

a11y (built in): each toast carries its own live semantics — info and success render as role="status" + aria-live="polite", warning and danger as role="alert" + aria-live="assertive". The status glyph is aria-hidden decoration and the dismiss control is a real button with aria-label="Dismiss" and its own :focus-visible ring. Auto-dismiss is opt-out for anyone who needs more time: pass duration: 0 to show() for one toast, or new LB.ToastManager({ autoDismiss: 0 }) for all of them, and the toast stays until it is dismissed. Timers also pause while the pointer is over a toast or focus is inside it. A toast carrying an action gets double the reading time — 10s instead of 5s — because the reader has to take in the message and decide about the action; its timer pauses the moment the pointer or focus arrives. A timed action is still a time limit on functionality under WCAG 2.2.1 (Level A), so the strictest reading is one call away: duration: 0 for a single toast, or new LB.ToastManager({ autoDismissWithAction: 0 }) to make every actionable toast persist. An actionable toast is also always role="status", never alert, since assertive announcements race the button. Esc dismisses a toast while focus is inside it. One caveat the pattern cannot solve: a control inside a live region is not reliably reachable for assistive tech, so the action must be safe to ignore — always leave a durable path to the same operation (a Trash view, a history panel).

Usage: Instantiate once: const mgr = new LB.ToastManager(); mgr.show({ variant, title, message }) — the region is created on first use and show() returns an id for mgr.dismiss(id). Add action: { label, onClick } for the undo flavor (pair it with variant: 'neutral'); exactly one action is supported by design — two or more choices belong in a Modal. The action closes the toast after firing unless you pass dismissOnAction: false. Options: duration (ms, 0 = persist), icon (neutral takes none by default), and new LB.ToastManager({ autoDismiss }) for the global default.

Toast Demo

Neutral — the actionable / undo flavor

A moved file, an archived thread, a deleted row: these are neutral events, not statuses, so this variant drops status colour and lifts off the page on the plain elevated surface, following the theme exactly like its status siblings — the two share one region and are often on screen together. It carries exactly one action and stays twice as long as a status toast (10s, pausing on hover or focus). Prefer this over a confirmation dialog for reversible actions: undo lets the work happen immediately and still satisfies WCAG 3.3.4's reversible branch, while confirmation dialogs train people to click through them.