Toast

An opinionated toast component.

Kobalte

The Toast component wraps solid-sonner, a SolidJS port of Sonner, and themes it to match your app.

1
import { toast } from "solid-sonner";
2
import { Button } from "~/components/ui/button";
3
import { Toaster } from "~/components/ui/toast";
4

5
export default function ToastDemo() {
6
  const showToast = () =>
7
    toast("Event created", {
8
      description: "Sunday, December 3 at 9:00 AM",
9
      action: {
10
        label: "Undo",
11
        onClick: () => {},
12
      },
13
    });
14

15
  return (
16
    <>
17
      <Toaster />
18
      <Button variant="outline" onClick={showToast}>
19
        Show Toast
20
      </Button>
21
    </>
22
  );
23
}

Installation

pnpm dlx shadcn@latest add @zaidan/toast
npx shadcn@latest add @zaidan/toast
yarn dlx shadcn@latest add @zaidan/toast
bunx --bun shadcn@latest add @zaidan/toast

Usage

Import toast from solid-sonner directly — the registry's toast.tsx only exports the themed Toaster, it does not re-export toast itself.

1
import { toast } from "solid-sonner";

1
toast("Event created", {
2
  description: "Sunday, December 3 at 9:00 AM",
3
});

Types

Call toast.success, toast.info, toast.warning, or toast.error to render the matching status icon. toast.loading renders a spinner.

1
import { toast } from "solid-sonner";
2
import { Button } from "~/components/ui/button";
3
import { Toaster } from "~/components/ui/toast";
4

5
export default function ToastTypes() {
6
  return (
7
    <>
8
      <Toaster />
9
      <div class="flex flex-wrap gap-2">
10
        <Button variant="outline" onClick={() => toast("Event has been created.")}>
11
          Default
12
        </Button>
13
        <Button variant="outline" onClick={() => toast.success("Event has been created.")}>
14
          Success
15
        </Button>
16
        <Button variant="outline" onClick={() => toast.info("Arrive 10 minutes before the event.")}>
17
          Info
18
        </Button>
19
        <Button
20
          variant="outline"
21
          onClick={() => toast.warning("The event cannot start before 8:00 AM.")}
22
        >
23
          Warning
24
        </Button>
25
        <Button variant="outline" onClick={() => toast.error("The event could not be created.")}>
26
          Error
27
        </Button>
28
      </div>
29
    </>
30
  );
31
}

Action

Pass an action with a label and onClick to render a button on the toast.

1
toast("Event created", {
2
  action: {
3
    label: "Undo",
4
    onClick: () => {},
5
  },
6
});

Promise

Use toast.promise to update one toast as an asynchronous task moves through loading, success, and error states.

1
import { toast } from "solid-sonner";
2
import { Button } from "~/components/ui/button";
3
import { Toaster } from "~/components/ui/toast";
4

5
export default function ToastPromise() {
6
  const showToast = () =>
7
    toast.promise(
8
      new Promise<{ name: string }>((resolve) => {
9
        window.setTimeout(() => resolve({ name: "Event" }), 2000);
10
      }),
11
      {
12
        loading: "Creating event…",
13
        success: (data) => `${data.name} created.`,
14
        error: "Could not create event.",
15
      },
16
    );
17

18
  return (
19
    <>
20
      <Toaster />
21
      <Button variant="outline" onClick={showToast}>
22
        Create Event
23
      </Button>
24
    </>
25
  );
26
}

API Reference

Toaster

The only export from toast.tsx. It forwards every prop to solid-sonner's Toaster and additionally wires up the app's color mode, status icons, and CSS variables so toasts match your theme.

See the solid-sonner README for Toaster props (position, richColors, duration, gap, visibleToasts, closeButton, dir, and more) and the full toast() API (toast(), toast.success(), toast.info(), toast.warning(), toast.error(), toast.loading(), toast.custom(), toast.message(), toast.promise(), toast.dismiss()).