120k
New

Toast

PreviousNext

A succinct message that is displayed temporarily.

Base UIReact AriaRadix UI
"use client"

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

Installation

Run the following command:

pnpm dlx shadcn@latest add toast

Add the Toaster component.

app/layout.tsx
import { Toaster } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

import { toast } from "@/components/ui/toast"
toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

Types

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

"use client"

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

Action

Pass button props with actionProps to render an action.

const id = toast.add({
  title: "Event created",
  actionProps: {
    children: "Undo",
    onClick() {
      toast.close(id)
    },
  },
})

Promise

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

"use client"

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

API Reference

See the Base UI Toast documentation for details about manager options, stacking, swipe dismissal, and the primitive API.