Toast

Installation

bunx --bun shadcn@latest add @sui/toast

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import { toast } from "@workspace/ui/components/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.

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.

API Reference

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