Toast

Timed notifications announced politely, with actions.

Import
import { Toast } from '@texuli/primitives/toast';
Pattern
Alert (WAI-ARIA APG)
Size budget
16.0 KiB gzip for @texuli/primitives/toast
Reference
packages/primitives/docs/prim-toast.md

Live demo

Loading the Toast demo…

Anatomy

Toast anatomy: each box holds the parts inside it.
  • Toast.Provider
    • Toast.Viewport
      • Toast.Root
        • Toast.Title
        • Toast.Description
        • Toast.Action
        • Toast.Close
  • Toast.Toasterready-made viewport and list

Behavior checks

tests/behavior/scenarios/toast.spec.ts runs 4 rows against the Toast scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 4 rows
  1. it exposes a labelled notifications region
  2. publishing shows title and description
  3. the Undo action dismisses the toast
  4. F6 moves focus to a toast action

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 16.0 KiB gzip for @texuli/primitives/toast (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).