Toast

Sonner underneath, our markup on top: it owns the stack, the timers and the announcements; we own every pixel. Mount ToastRegion once at the app root and call toast() from anywhere. Five tones, each a pastel wash of its own colour stirred into the app's cream — default, success, destructive, info, and loading, which spins and should usually be given no timeout.

Tones

The cards themselves, standing still. A toast lasts about five seconds, which is long enough to read one and far too short to compare three — so these are rendered rather than fired.

<Toast title="Note saved" description="Linked to Alice Chen." />
<Toast title="Added to your brain" tone="success" />
<Toast title="Couldn't save" tone="destructive" />
<Toast title="Sync moved to the background" tone="info" />
<Toast title="Hydrating your Second Brain" tone="loading" />

Note savedLinked to Alice Chen.

Added to your brainDana Whitfield is now yours.

Couldn't save your changesThe backend didn't answer.

Sync moved to the backgroundWe'll tell you when it lands.

Hydrating your Second Brain#455 in queue

Playground

Render <ToastRegion /> once at the app root; queue from anywhere. The tone is a leading icon rather than a coloured slab — the toast keeps its dark chrome, because a red block in the corner is louder than the news usually is.

toast({"title":"Note saved","description":"Linked to Alice Chen.","tone":"default"}, { timeout: 5000 });

<ToastRegion />