Toast

A succinct message that is displayed temporarily.

"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.

Timeline Toggle

On This Page

Installation Usage Types Action Promise API Reference