overlaystexulinot agent-emittableapp
Toaster
toaster
Live region that renders toast notifications from the shared store.
Live examples
Toaster region
Toaster region
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
label | string | no | "Notifications" | — |
position | enum (top-start, top-center, top-end, bottom-start, bottom-center, bottom-end) | no | "bottom-end" | Block edge and logical inline position; narrow screens center the stack |
offset | string | no | — | CSS length or px number from the stack edge |
store | unknown | no | — | Optional ToastStore inject (tests) |
dismissLabel | string | no | "Dismiss notification" | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
— | See accessibility notes for keyboard behavior. |
Accessibility
- role=region with polite live updates; dismiss controls are labelled.
Evidence for toaster
Latest committed gates for toaster (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario toast
Rows in tests/behavior/scenarios/toast.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.
Size (gzip)
@texuli/primitives/toast · measured 6.03 KiB · budget 16.0 KiB
Measured gzip from docs/quality/perf-primitives.md (2026-10-23).
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Transient success/error feedback after an action
Don’t use when
Prefer another component
- Blocking errors that need a decision (use alert-dialog)