ComponentsToaster

overlaystexulinot agent-emittableapp

Toaster

toaster

Live region that renders toast notifications from the shared store.

Live examples

Toaster region

Toaster region

Loading demo…

Props

Public props for Toaster
NameKindRequiredDefaultDescription
labelstringno"Notifications"—
positionenum (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
offsetstringno—CSS length or px number from the stack edge
storeunknownno—Optional ToastStore inject (tests)
dismissLabelstringno"Dismiss notification"—
classstringno——

Keyboard

Keyboard behavior for Toaster
KeyAction
—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

4 checks

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.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

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)