Toast os-015

Also known as: snackbar, ephemeral notice, sonner-style toast

A short note after Save or Book — it worked, or try again — that floats in the corner and then leaves. The page stays put.

Example

after save — Meadow Farm oils, Wednesday morning

Wednesday morning

Cold-pressed rapeseed, 500ml, for Helen Marsh. Unaltered — not cooked or added to. The van leaves Meadow Farm by noon.

Wednesday morning saved

Cold-pressed rapeseed, 500ml — unaltered. The van still leaves Meadow Farm by noon.

Variants

success

Wednesday morning saved

Icon only uses the success colour. The card stays a plain surface.

error

Couldn’t save — try again

The Wednesday slot didn’t stick. Check the connection, then save once more.

info

Packing the evening before

We’ll bottle the Wednesday oils on Tuesday night. Nothing cooked or added.

How it works

Layout: A small card in the corner: icon, title, optional line, optional action, and Dismiss. The live stack is mounted on the document body so the catalogue rail cannot clip it. At most three open notices.

Interaction: Buttons above raise a notice without moving focus and without opening a dialog. Dismiss removes that notice. Escape removes it only when focus is inside it. Hover or focus pauses the timer. The empty stack does not block clicks.

Motion: A quiet fade and a few pixels of travel on the base transition. No spring, scale, or bounce. Reduced motion shows and hides without the slide.

Content: One sentence of farm-shop result copy. Success, error, and info change the icon colour only — the card is not painted green. The trigger follows the button contract, with one primary in the section.

Relationships

The buttons that raise a toast follow the Button contract. Sheet and Lightbox stay open for a task or a decision — a toast is the light “it worked / try again” after that task. A save inside Tabs can confirm here without switching the panel away. This is an ODS-owned contract, not the Sonner package API.

Parameters

Name	Type	Default	Description
`title`	string	—	Short result line
`description`	string	—	One supporting sentence
`tone`	string	`info`	`success` \| `error` \| `info`
`duration`	number	4000 / 6000	Milliseconds. Error defaults longer. `0` stays until dismiss
`action`	object	—	Optional label + handler. Runs, then dismisses
`position`	string	`bottom-end`	Viewport corner. One viewport, on document.body

Tokens

--font-primary --color-bg --color-bg-muted --color-text --color-text-secondary --color-border --color-border-focus --color-success --color-error --color-info --z-modal --radius-md --radius-lg --shadow-lg --spacing-1 --spacing-2 --spacing-3 --spacing-4 --spacing-8 --text-sm --transition-base --transition-fast

Provenance

Item	Detail
Inspiration	shadcn Sonner / 21st.dev sonner pattern (principles only — not a package re-export)
Scout approved	Phil Parry, 2026-09-23
Maturity	experimental
Binding	`components/toast/toast.css` + `components/toast/react/Toast.tsx`
Catalogue CSS	`catalogue/components/toast.css` (mirror — http.server roots at catalogue/)

Code

os-015 · Source: components/toast/toast.css ▾

<div class="og-toast-viewport og-toast-viewport--bottom-end" role="region" aria-label="Notices">
  <div class="og-toast og-toast--success" role="status" data-open="true">
    <span class="og-toast__icon" aria-hidden="true">…</span>
    <div class="og-toast__body">
      <p class="og-toast__title">Wednesday morning saved</p>
    </div>
    <button type="button" class="og-toast__close" aria-label="Dismiss">…</button>
  </div>
</div>