Shadcn Toast

A toast is a short message that appears, then goes away. Use it for “Saved”, undo, or a promise that is still running. If the message must stay on the page until they act, that is an Alert. For a Sonner-shaped API, see Sonner.

Usage

import { toast } from "@/components/ui/toast"

toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

Mount <Toaster /> once in the root layout. toast.add returns an id — pass it to toast.close.

Composition

Types

type is success, info, warning, error, or loading. Each one paints an icon.

Action

actionProps is a button. Use it for Undo. Close the toast from onClick.

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

Promise

toast.promise updates one toast as a task moves through loading, success, and error.

API

toast.add(options) returns an id. toast.close(id) dismisses it. toast.promise(promise, options) wires loading / success / error.

Keyboard

Notes

Don't fire a toast for something they already see on the page. That's noise.

With other components

Questions

Related