Toast types in Sonner

Different messages need different weight. Sonner has a function per toast type, and every toast() call can take an options object.

All Sonner examples Sonner: usage and stats

Toast types in Sonner: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

One function per type. toast.success(), toast.info(), toast.warning() and toast.error() each render their own type of toast. [1]
Add a description. The Default entry passes { description: ... } as the second argument to add a second line under the title. [1]
Fire them on load. A useEffect calls each type once, 400 ms apart, so all five appear without a click. The buttons show them again. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useEffect } from "react";
import { Toaster, toast } from "sonner";

// one entry per toast type
const types = [
  ["Default", () => toast("Event has been created", { description: "Monday, January 3rd at 6:00pm" })],
  ["Success", () => toast.success("Event has been created")],
  ["Info", () => toast.info("Be at the area 10 minutes before the event time")],
  ["Warning", () => toast.warning("Event start time cannot be earlier than 8am")],
  ["Error", () => toast.error("Event has not been created")],
];

const S = {
  page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" },
  card: { width: 260, background: "#fff", color: "#1f2937", borderRadius: 14, padding: 18, boxShadow: "0 10px 30px rgba(0,0,0,.5)" },
  btn: { display: "block", width: "100%", margin: "6px 0", padding: "9px 0", border: "1px solid #e5e7eb", borderRadius: 8, background: "#f9fafb", fontSize: 14, fontWeight: 600, cursor: "pointer" },
};

export default function App() {
  // fire each type once on load, a little apart
  useEffect(() => {
    const ids = types.map(([, fire], i) => setTimeout(fire, 300 + i * 400));
    return () => ids.forEach(clearTimeout);
  }, []);

  return (
    <div style={{ ...S.page, justifyContent: "flex-start", paddingLeft: 40 }}>
      <Toaster />
      <div style={S.card}>
        <h2 style={{ margin: "0 0 8px", fontSize: 17 }}>Toast types</h2>
        {types.map(([label, fire]) => (
          <button key={label} style={S.btn} onClick={fire}>{label}</button>
        ))}
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Click any button to show that type of toast again. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with sonner 2.0.8, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More Sonner examples

Showing a toast with Sonner Changing toast position in Sonner Rich colors for Sonner toasts Expanded toasts and visibleToasts in Sonner

Sources

Sonner website

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Sonner? Ask AgentGid →