GitHub
New

Toast

PreviousNext

A succinct message that is displayed temporarily.

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

export function ToastDemo() {
  return (
    <Button
      variant="outline"
      data-toast-trigger=""
      data-toast-title="Event created"
      data-toast-description="Sunday, December 3 at 9:00 AM"
    >
      Show Toast
    </Button>
  )
}

Installation

pnpm dlx shadcnui-hono-jsx@latest add toast

This component uses a small client script. add installs it into public/shadcn/; serve that directory at /shadcn/ and load the script on pages that use the component (see Client Scripts):

<script type="module" src="/shadcn/toast.js"></script>

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.

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

export function ToastTypes() {
  return (
    <div class="flex flex-wrap gap-2">
      <Button
        variant="outline"
        data-toast-trigger=""
        data-toast-description="Event has been created."
      >
        Default
      </Button>
      <Button
        variant="outline"
        data-toast-trigger=""
        data-toast-type="success"
        data-toast-description="Event has been created."
      >
        Success
      </Button>
      <Button
        variant="outline"
        data-toast-trigger=""
        data-toast-type="info"
        data-toast-description="Arrive 10 minutes before the event."
      >
        Info
      </Button>
      <Button
        variant="outline"
        data-toast-trigger=""
        data-toast-type="warning"
        data-toast-description="The event cannot start before 8:00 AM."
      >
        Warning
      </Button>
      <Button
        variant="outline"
        data-toast-trigger=""
        data-toast-type="error"
        data-toast-description="The event could not be created."
      >
        Error
      </Button>
    </div>
  )
}

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.

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

export function ToastPromise() {
  return (
    <Button
      variant="outline"
      data-toast-trigger=""
      data-toast-type="success"
      data-toast-description="Event created."
    >
      Create Event
    </Button>
  )
}

Notes

  • Toasts are added in the browser with toast from the client script (import { toast } from "/shadcn/toast.js", then toast.add({ title, description, type, actionProps })), or declaratively with data-toast-trigger buttons (data-toast-title, data-toast-description, data-toast-type). The script copies the toast markup from templates that <Toaster> renders, so edit the components as usual.
  • On the server, pass toasts to <Toaster toasts={[{ title: "Saved" }]} /> (for example flash messages after a form post) or use a per-response createToastManager() with <Toaster toastManager={manager}>; they show without JavaScript, and the script times them out. The exported toast is shared by every request on the server, so its add() throws there. Action onClick and other function props, and useToastManager() state updates, work only through /shadcn/toast.js.
  • Accepts class instead of className.
  • Upstream documentation: shadcn/ui Toast. See also Differences from shadcn/ui.

API Reference

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