Skip to main content

Toasts

Toast notifications are built on react-hot-toast. Components never call toast() directly for success/error feedback — they go through the logging wrappers in src/lib/ui/incidents/toasts.ts so every toast is also recorded in the server log.

Provider

ComponentFilePurpose
ToastProvidersrc/lib/utils/ToastProvider.tsxWraps the app in the root locale layout (src/app/[locale]/layout.tsx) and renders the react-hot-toast Toaster. Applies global styling: centred text, green palette for success toasts, red palette for error toasts.

Logging wrappers

The wrappers live in src/lib/ui/incidents/toasts.ts. Besides showing the toast, they extract the calling function's name from the V8 stack trace, log through the client-side pino logger, and fire the logToServer server action (src/lib/ui/incidents/logToServer.ts) so the event also lands in the server log.

FunctionShowsLogs atParameters
toastErrortoast.errorerrormessage (string or JSX), optional err for structured logging, optional logMessage — plain-string override for the log entry when message is JSX and cannot be serialised.
toastWarntoast.errorwarnmessage (string or JSX), optional logMessage — same override as toastError.
toastSuccesstoast.successinfomessage (string or JSX), optional logMessageOrOptions — either a log-string override or a react-hot-toast options object, optional toastOptions — options when both a log string and options are needed.

toastWarn looks identical to toastError for the user; the difference is the log level. Use it for user-input validation messages (blocked saves, duplicate names, "no changes to apply"), and reserve toastError for genuine failures (rejected server actions, exceptions). This keeps error-level logs meaningful and stops validation toasts from surfacing in the Next.js dev overlay, which intercepts console.error only.

Usage:

import { toastError, toastSuccess, toastWarn } from "@/lib/ui/incidents";

toastSuccess({ message: t("organizationSaved") });
toastError({ message: t("saveFailed"), err });
toastWarn({ message: t("expiredCannotSaveActive") });

Custom action toasts

ComponentFilePurpose
twoButtonToastsrc/lib/ui/buttongroups/twoButtonToast.tsxtoast.custom wrapper that renders a Paper card with a title, message, and two action buttons (each handler receives the toast id for dismissal). The frame, icon, and header share one accent color taken from bgColor, falling back to theme.palette.warning.main when the caller doesn't set one. Duration is Infinity — the handlers are responsible for dismissing. Used for confirmations that must interrupt a flow, e.g. unsaved-changes warnings in ActivityDetails and OrgLanguages. See Button Groups for the component details.