Toast

Toast notifications powered by sonner

Toast notifications built on top of the sonner library. Render Toaster once (e.g. in your layout) and call toast() from anywhere.

tsx

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

export default function Example() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast("Settings saved", {
            description: "Your preferences have been updated.",
          })
        }
      >
        Show toast
      </Button>
    </>
  );
}

Installation

bash

liminal add sonner

Usage

tsx

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

export default function Example() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast("Settings saved", {
            description: "Your preferences have been updated.",
          })
        }
      >
        Show toast
      </Button>
    </>
  );
}

Examples

Basic message

tsx

toast("Hello!");

With description

tsx

toast("Update ready", {
  description: "Restart the app to apply changes.",
});

Variants

Use success, error, warning, or info for semantic styling.

tsx

toast.success("Saved!");
toast.error("Something failed");

API

Prop	Type	Default	Description
toast(message, options)	function	-	Shows a toast. message: string. options: description, duration, variant, etc.
Toaster	component	-	Render once in your app (e.g. layout). Renders toasts in a portal.
options.description	string	-	Secondary text below the message.
options.duration	number	4000	Duration in ms before the toast closes.