Toast

The Toast component is used to display brief, non-intrusive messages that appear temporarily to provide feedback or information to the user.

Docs API Reference

Setting Up the Toast Component

Execute the following command in your terminal:

npx shadcn@latest add toast

Integrate the main Toaster component into your application's root layout:


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  );
}

Implementing and Displaying Toasts

The useToast hook provides access to a toast function, which is the primary method for programmatically triggering and displaying toast notifications within your application.

import { useToast } from "@/hooks/use-toast";

export const ToastDemo = () => {
  const { toast } = useToast();

  return (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled: Catch up",
          description: "Friday, February 10, 2023 at 5:57 PM",
        });
      }}
    >
      Show Toast
    </Button>
  );
};

To control the maximum number of toast notifications that can be displayed concurrently, you can adjust the value of the TOAST_LIMIT constant within the use-toast.tsx file.

Practical Examples and Implementations

Basic Simple Toast Notification

Toast Notification with a Title

Toast Notification Including an Action Button

Displaying a Destructive Toast Notification

To render a toast notification with a visually distinct style indicating a destructive or error state, invoke the toast function with the variant property set to "destructive".

Textarea Toggle