Toaster
Toaster(
props):Element|null
Defined in: packages/react/src/ui/sonner.tsx:44
Renders sonner’s toast viewport, synced to the admin panel’s light/dark
theme — unless an ancestor <Toaster> (this same component, rendered
higher in the tree, typically by the host app) is already mounted, in
which case this renders nothing and toasts push into that ancestor’s
viewport instead.
Mounted by default inside AdminLayout. A host app that wants its own
toast positioning/config, shared between its own toasts and the admin
panel’s error toasts (useVexMutation’s onError), should render this
exported <Toaster> — not sonner’s own — above AdminLayout;
AdminLayout’s internal mount then defers to it automatically. This only
detects another instance of this component — sonner’s own <Toaster>
rendered directly (bypassing this wrapper) has no way to announce itself
and would still double-render.
Reads the theme via the raw ThemeContext, not useTheme(): a <Toaster>
rendered by the host app above AdminLayout sits outside ThemeProvider
(mounted inside AdminLayout), where useTheme() would throw — this
degrades to "system" instead.
Parameters
Section titled “Parameters”ToasterProps
Forwarded to sonner’s <Toaster>, overriding the theme/position/richColors defaults.
Returns
Section titled “Returns”Element | null
The rendered toast viewport, or nothing if an ancestor already mounted one.