Documentation
Components
Toast

Toast

A succinct message that is displayed temporarily.

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/toast.json

Then, add the Toaster component to app/layout.tsx

import { Toaster } from "@/components/ui/toaster"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

The useToast hook returns a toast function that you can use to display a toast.

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>
  )
}

API

useToast

const { toast, dismiss, toasts } = useToast()
PropertyTypeDescription
toast(toast: Omit<ToasterToast, "id">) => { id: string, dismiss: () => void, update: (toast: ToasterToast) => void }A function that displays a toast.
dismiss(toastId?: string) => voidA function that dismisses a toast.
toastsToasterToast[]All the toasts that have been pushed to the context this hook was invoked in.

ToasterToast

In addition to the following, Props of Radix Toast Root (opens in a new tab) are also available.

PropertyTypeDefault
idString-
titleReactNode-
descriptionReactNode-
variant"default" | "dark" | "info" | "success" | "warning" | "error" | "destructive"default
actionToastActionElement-
iconReactNode-

Examples

Simple

WithDescription

WithAction

WithIcon

Variant

TextareaToggle