Sonner

A pre-configured toast provider that wraps the Sonner library. It integrates with next-themes for automatic light/dark theming and provides custom icons for success, info, warning, error, and loading states. Add the Toaster component once in your layout, then trigger toasts anywhere via the toast function from Sonner.

"use client"

import { toast } from "sonner"
import { Button } from "@/components/ui/button"

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

Anatomy

import { Toaster } from "@/components/ui/sonner"
import { toast } from "sonner"

{/* Add once in your root layout */}
<Toaster />

{/* Trigger from anywhere */}
<Button onClick={() => toast("Event has been created")}>
  Show Toast
</Button>

Examples

Basic toast

import { toast } from "sonner"

<Button onClick={() => toast("Event has been created")}>
  Show Toast
</Button>

Toast variants

Sonner provides built-in variants for different intent levels.

import { toast } from "sonner"

<Button onClick={() => toast.success("Profile saved")}>Success</Button>
<Button onClick={() => toast.error("Something went wrong")}>Error</Button>
<Button onClick={() => toast.warning("Disk space low")}>Warning</Button>
<Button onClick={() => toast.info("New update available")}>Info</Button>

Toast with description and action

import { toast } from "sonner"

<Button
  onClick={() =>
    toast("Event created", {
      description: "Friday, March 21, 2026 at 5:00 PM",
      action: {
        label: "Undo",
        onClick: () => console.log("Undo"),
      },
    })
  }
>
  Show Toast
</Button>

API Reference

Toaster

The toast container component. Renders the Sonner Toaster with design-system theming applied. Place it once in your root layout.

Prop	Type	Default	Description
`position`	`string`	`"bottom-right"`	Where toasts appear on screen.
`duration`	`number`	`4000`	Default toast duration in milliseconds.
`richColors`	`boolean`	`false`	Enable rich color variants for toast types.

Accepts all props from Sonner's ToasterProps.