Toast

A succinct message that is displayed temporarily.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/toast.json

Usage

Add the Toaster component to your app's layout.tsx.

import { Toaster } from "@/components/ui/toast";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

"use client";

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

function showToast() {
  toast.add({
    title: "Event created",
    description: "Sunday, December 3 at 9:00 AM",
  });
}

<Button onClick={showToast} variant="outline">
  Show Toast
</Button>

Types

Set the type option to render a status icon. The built-in renderer recognizes success, info, warning, error, and loading.

Action

Pass button props with actionProps to render an action.

Promise

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