Toaster

Toaster based on Sonner, styled with the theme tokens. A success toast takes --color-success, an error toast --color-destructive, both AA-checked pairs; a warning or info toast writes --color-warning or --color-info on the background.

import { Toaster } from "@evolve-storefront/ui/toaster";

Design notes

Escape dismisses the visible toasts wherever focus is, and leaves focus where it was, so a toast covering the focused control can be cleared without moving off it. A dialog's Escape closes only the dialog: it stops the event before it gets here.

Preview

DefaultOpen in Storybook ↗

Usage

// Mount once, in the root layout.
<Toaster />;

// Then raise toasts from anywhere with Sonner's toast().
toast.success(t("listSaved"));
toast(t("itemRemoved"), { action: { label: t("undo"), onClick: restore } });

Props

Prop	Type	Description
id?	string
invert?	boolean
theme?	"light" | "dark" | "system"
position?	Position
hotkey?	string[]
richColors?	boolean
expand?	boolean
duration?	number
gap?	number
visibleToasts?	number
closeButton?	boolean
toastOptions?	ToastOptions
className?	string
style?	CSSProperties
offset?	Offset
mobileOffset?	Offset
dir?	"auto" | "rtl" | "ltr"
swipeDirections?	SwipeDirection[]
icons?	ToastIcons
customAriaLabel?	string
containerAriaLabel?	string

Any other props go to the root element, like on a plain HTML element.

Examples

Top Right

<Toaster position="top-right" />;

Open in Storybook ↗