Preview

Import

import { Sonner, sonnerToast } from "@sigil-ui/components";

Setup

Add <Sonner /> once in your root layout:

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Sonner />
      </body>
    </html>
  );
}

Trigger toasts

sonnerToast("Event created");
sonnerToast.success("Changes saved");
sonnerToast.error("Something went wrong");
sonnerToast.info("New version available");

With description and action

sonnerToast("File uploaded", {
  description: "invoice-2024.pdf was uploaded successfully.",
  action: { label: "View", onClick: () => console.log("view") },
});

Custom position

<Sonner position="top-center" />

Props

Sonner accepts all props from the sonner library's Toaster component. Token-aware class overrides are applied by default.

Prop	Type	Default	Description
`position`	`string`	`"bottom-right"`	Toast position
`toastOptions`	`object`	token-styled	Override default class names
`richColors`	`boolean`	`false`	Enable rich color variants
`expand`	`boolean`	`false`	Expand toasts by default

Preview

Import

Setup

Trigger toasts

With description and action

Custom position

Props

On this page