Expanded toasts and visibleToasts in Sonner

When several toasts arrive together you can decide how many stay on screen and whether the stack is shown open.

All Sonner examples Sonner: usage and stats

Expanded toasts and visibleToasts 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

Limit visible toasts. visibleToasts={visible} comes from the slider, from 1 to 5. Five toasts are sent, so a low value leaves some off screen. [1]
Expand or stack. expand={expand} comes from the checkbox. The docs demo the two settings as Expand and Default. [1]
Send a burst. burst() calls toast() five times, 250 ms apart. It runs once on load and again from the button. [2]

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, useState } from "react";
import { Toaster, toast } from "sonner";

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

let n = 0;
const burst = () => {
  // five toasts in a row
  for (let i = 0; i < 5; i++) setTimeout(() => toast(`Notification ${++n}`), i * 250);
};

export default function App() {
  const [expand, setExpand] = useState(true);
  const [visible, setVisible] = useState(3);

  useEffect(() => {
    const id = setTimeout(burst, 300);
    return () => clearTimeout(id);
  }, []);

  return (
    <div style={S.page}>
      <Toaster expand={expand} visibleToasts={visible} />
      <div style={S.card}>
        <label style={{ display: "flex", gap: 8, fontWeight: 600 }}>
          <input type="checkbox" checked={expand} onChange={(e) => setExpand(e.target.checked)} />
          expand
        </label>
        <label style={{ display: "block", marginTop: 12 }}>
          visibleToasts = {visible}
          <input type="range" min={1} max={5} value={visible} onChange={(e) => setVisible(Number(e.target.value))} style={{ width: "100%" }} />
        </label>
        <button style={S.btn} onClick={burst}>Send 5 toasts</button>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Untick expand or lower visibleToasts, then press "Send 5 toasts". 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 Toast types in Sonner Changing toast position in Sonner Rich colors for Sonner toasts

Sources

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 →