Toast

Note

This component uses client-side React hooks, so you must wrap it with a "use client" directive when using an SSR framework.

Usage

Import and wrap your whole application with the ToastProvider component.

"use client";
import { ToastProvider } from "@/components/toast";

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	return (
		<body>
			<ToastProvider>{children}</ToastProvider>
		</body>
	);
}

Import and call the useToast hook in your components, and use toast.open to render a toast.

"use client";
import { useToast } from "@/components/toast";
import { Button } from "@/components/ui/button";

export function ToastExample() {
  const toast = useToast();

  return (
    <div className="flex flex-row items-center justify-center gap-2 mb-5">
      <Button
        variant={"default"}
        onClick={() => {
          toast.open({ title: "Toast", description: "Toast description", type: "success" });
        }}
      >
        Success
      </Button>
        <Button
            variant={"default"}
            onClick={() => {
                toast.open({ title: "Toast", description: "Toast description", type: "error" });
            }}
        >
            Error
        </Button>
        <Button
            variant={"default"}
            onClick={() => {
                toast.open({ title: "Toast", description: "Toast description", type: "info" });
            }}
        >
            Info
        </Button>
        <Button
            variant={"default"}
            onClick={() => {
                toast.open({ title: "Toast", description: "Toast description", type: "warning" });
            }}
        >
            Warning
        </Button>
    </div>
  );
}

Props

ToastProvider does not have any props, but you can pass a children prop to render your application inside the provider.

toast.open

Prop	Type	Default
`duration?`	`number`	-
`type`	`union`	-
`description`	`string`	-
`title`	`string`	-

Toast

Install

Usage

Props

On this page