1. Docs
  3. Components
  5. Toast

Toast

A succinct message that is displayed temporarily.

Docs

Installation

Copy and paste the following code into your project.

Add the Toaster component

src/app/providers.tsx
"use client";
 
import { ThemeProvider } from "next-themes";
import { useRouter } from "next/navigation";
import { RouterProvider } from "react-aria-components";
import { Toaster } from "./ui/toast";
 
declare module "react-aria-components" {
  interface RouterConfig {
    routerOptions: NonNullable<
      Parameters<ReturnType<typeof useRouter>["push"]>[1]
    >;
  }
}
 
interface ProvidersProps {
  children: React.ReactNode;
}
 
export function Providers({ children }: ProvidersProps) {
  const router = useRouter();
 
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      <RouterProvider navigate={router.push}>
        {children}
        <Toaster />
      </RouterProvider>
    </ThemeProvider>
  );
}

Usage

import { toast } from "~/components/ui/toast";
toast("Hello, World!", {
  description: "This is a toast message.",
});

Examples

Default

With Description

Close Button

Status

Promise

Custom

TextFieldToggle