0

Toast

PreviousNext

A succinct message that is displayed temporarily.

"use client"

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

Installation

bunx --bun shadcn@latest add @ondo-ui/toast

Usage

Mount Toaster once, near the root of your app.

import { Toaster } from "@/components/ui/toast"
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Then call toast from anywhere — it is a standalone manager, so the caller does not need to be inside the provider.

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

Examples

Types

Set type 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. toast.add returns the id, so the action can close its own toast.

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

Promise

Use toast.promise to move a single toast through loading, success, and error as an async task settles.

"use client"

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

API reference

The component wraps Base UI Toast and accepts all of its props.

ExportDescription
ToasterProvider, portal, viewport, and the default toast list in one. Mount once.
toastThe default toast manager — add, close, update, promise.
createToastManagerCreates an additional manager for a separate Toaster.
useToastManagerReads the toasts of the nearest provider, for a custom list.
ToastA single toast root.
ToastPortal, ToastProvider, ToastViewportThe pieces Toaster composes, exported for custom layouts.
ToastContent, ToastTitle, ToastDescriptionToast body slots.
ToastAction, ToastCloseAction and dismiss buttons.