Notifications

In-app notifications in Helm are delivered as toasts via the Toaster host. Mount it once near the app root and fire messages from anywhere with the toast function from sonner. Reach for a notification when the system needs to tell the user something transient: an action succeeded, a background job finished, a recoverable error occurred. The same component is documented from the component-catalog angle under Sonner (Toasts); this page frames it as the system notification pattern.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: sonner.tsx

import { Toaster } from "@beacon/design-system";
import { toast } from "sonner";

// Mount the notification host once at the app root.
<Toaster />

// Emit notifications from anywhere in the app.
toast.success("Lien filed successfully");
toast.error("Could not reach the filing service");
toast.warning("Your session is about to expire");
toast.info("3 new records imported");

Parts

Part	Role
`Toaster`	The notification host. Mount once; renders the stack, follows the app theme, and supplies semantic icons.
`toast` (from `sonner`)	The imperative trigger used to emit a notification from any code path.

Semantic levels

Call	Meaning
`toast.success(...)`	An action completed successfully.
`toast.error(...)`	An action failed or was rejected.
`toast.warning(...)`	A caution the user should notice.
`toast.info(...)`	Neutral, informational context.
`toast.promise(p, opts)`	Background work that transitions loading then success or error.

When to use

Confirm the outcome of a user action without interrupting the flow.
Report background job results (imports, exports, syncs).
Surface recoverable errors that do not require an immediate decision.

Do not use a notification for a blocking decision the user must resolve before continuing. Use a dialog for that. For the full component reference and variant table, see Sonner (Toasts).