Toast · CropWatch UI

CwToast

Toast notifications for short confirmations and alerts. Routine toasts are announced politely and dismiss after 6 seconds; warning and danger toasts are announced immediately, and danger toasts stay until the user dismisses them. The timer pauses while the pointer or keyboard focus is on a toast.

Tones

createCwToastContext();
const toast = useCwToast();

<CwToastContainer />
<CwButton onclick={() => toast.add({ tone: 'success', message: 'Saved!' })}>
	Show toast
</CwButton>

Title & sticky danger

toast.add({
	tone: 'danger',
	title: 'Sensor offline',
	message: 'CW-AIR-014 has not reported for 2 hours.'
	// danger toasts stay until dismissed; pass duration to override
});

Duration & dismissal

Stacking

At most 4 toasts are shown. When the stack is full, the oldest routine toast is removed first, so danger and warning toasts are never pushed out by routine ones. This button adds one danger toast and five info toasts.

API

Usage and API reference

The toast system is a small context-based API rather than a single component. Create the context once, mount a container once, and then call `toast.add(...)` anywhere below that tree.

How to think about it

Create the context high in the tree Call `createCwToastContext()` in a layout or root component so all child routes can access the toast API.
Render one container Mount `CwToastContainer` once, usually near the root layout, so notifications have a consistent stack location.
Trigger toasts from feature code Use `useCwToast()` in child components and call `toast.add(...)` after save, error, or background events.

System API

API	Type	Details
`createCwToastContext(maxItems?)`	`(maxItems?: number) => CwToastApi`	Creates and stores the toast context. Call this once near the app root.
`useCwToast()`	`() => CwToastApi`	Reads the toast API from context inside child components.
`<CwToastContainer />`	`component`	Renders the visible toast stack for the current context.
`toast.add({ tone, message, duration, dismissible })`	`(options) => string`	Pushes a toast and returns its generated id.
`toast.dismiss(id)`	`(id: string) => void`	Removes a toast explicitly.
`toast.items`	`readonly CwToastItem[]`	Current visible toast items in the context.
`toast title`	`string`	Optional bold title above the message.
`CwToastContainer label`	`string`	Accessible name for the toast region.
`CwToastContainer dismissLabel`	`string`	Accessible label for each close button.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Create the toast system in a layout

Mount the context and container once at the top of the route tree.

// src/routes/+layout.svelte
<script lang="ts">
	import { createCwToastContext, CwToastContainer } from '@cropwatchdevelopment/cwui';

	createCwToastContext(5);
</script>

<slot />
<CwToastContainer />

Trigger success, warning, and sticky toasts

Use the toast API anywhere below the provider.

<script lang="ts">
	import { CwButton, useCwToast } from '@cropwatchdevelopment/cwui';

	const toast = useCwToast();
</script>

<CwButton onclick={() => toast.add({ tone: 'success', message: 'Saved!' })}>
	Show success
</CwButton>

<CwButton
	variant="secondary"
	onclick={() =>
		toast.add({
			tone: 'warning',
			message: 'Gateway has not checked in for 15 minutes.',
			duration: 10000,
			dismissible: true
		})
	}
>
	Show warning
</CwButton>