Sonner

An opinionated toast component for React. Built on top of sonner with theming support.

1. Import

Import the toaster component from the design system.

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

2. Setup

Add the Toaster component to your app layout with proper configuration.

<Toaster
  theme={theme as ToasterProps["theme"]}
  className="toaster group"
  icons={{
    success: <CircleCheckIcon className="size-4" />,
    info: <InfoIcon className="size-4" />,
    warning: <TriangleAlertIcon className="size-4" />,
    error: <OctagonXIcon className="size-4" />,
    loading: <Loader2Icon className="size-4 animate-spin" />,
  }}
  style={{
    "--normal-bg": "var(--popover)",
    "--normal-text": "var(--popover-foreground)",
    "--normal-border": "var(--border)",
    "--border-radius": "var(--radius)",
  } as React.CSSProperties}
  toastOptions={{
    classNames: {
      toast: "cn-toast",
    },
  }}
  {...props}
/>

3. Props

Toaster component props.

Prop	Type	Default
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"
richColors	boolean	false
closeButton	boolean	false
duration	number	4000

4. Usages

Common toast patterns and configurations.

import { toast } from "sonner";
import { Button } from "@/design-system/components/ui/button";

export function Example() {
  return (
    <Button
      variant="outline"
      onClick={() => toast("Event has been created")}
    >
      Show Toast
    </Button>
  );
}