Sonner

Stackable, swipeable toast notifications. Built on the sonner library; skinned with Tidal tokens. Prefer over Toast for most notification needs — richer API, auto-stacking, promise support.

Setup

Render a single <Toaster /> near the root of your app (typically in the root layout). Then call toast(...) from anywhere — no provider wiring, no open-state plumbing. Pass theme={resolvedTheme} from next-themes so Sonner's own dark mode tracks the page.

Default

import { toast } from "@tidal-ds/react";

toast("Event has been scheduled", {
  description: "Sunday, December 03, 2023 at 9:00 AM",
});

Success

toast.success("Changes saved", {
  description: "Your preferences have been updated.",
});

Error

toast.error("Couldn't save changes", {
  description: "Check your connection and try again.",
});

With action

toast("Event has been scheduled", {
  description: "Sunday, December 03, 2023 at 9:00 AM",
  action: {
    label: "Undo",
    onClick: () => toast("Scheduling reverted"),
  },
});

Props

Component / API	Notable props
Toaster	position ("bottom-right" \| "top-right" \| "bottom-center" \| …), theme ("light" \| "dark" \| "system"), richColors, closeButton, expand, visibleToasts, duration, offset, …
toast()	title (string \| ReactNode), options: { description, action: { label, onClick }, cancel, duration, id, icon, … }
toast.success / error / info / warning / loading	Same signature as toast(); varies the icon / accent.
toast.promise(p, { loading, success, error })	Wire a toast to a Promise — swaps loading → success/error on settle.
toast.dismiss(id?)	Programmatically dismiss one or all toasts.

Source

packages/react/src/components/sonner.tsx · Figma node 2819:30654