Toast

A succinct message displayed temporarily.

Powered by

Shadcn UIBase UI

Installation

npx shadcn@latest add @redpanda/toast

pnpm dlx shadcn@latest add @redpanda/toast

yarn dlx shadcn@latest add @redpanda/toast

bunx shadcn@latest add @redpanda/toast

nubx shadcn@latest add @redpanda/toast

aube dlx shadcn@latest add @redpanda/toast

Usage

Mount Toaster once near the root of your application.

import { Toaster } from "@/components/redpanda-ui/toast"

export function App({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Add a toast from any client component through the shared manager.

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

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

Anatomy

<Toaster>
└── <ToastProvider>
    └── <ToastPortal>
        └── <ToastViewport>
            └── <Toast>
                └── <ToastContent>
                    ├── Status icon
                    ├── <ToastTitle>
                    ├── <ToastDescription>
                    ├── <ToastAction>
                    └── <ToastClose>

Types

Set type to render a status icon. Supported built-in types are success, info, warning, error, and loading.

toast.add({
  type: "success",
  title: "Settings saved",
})

Action

Pass button props through actionProps to render an inline 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.

toast.promise(createEvent(), {
  loading: "Creating event…",
  success: "Event created.",
  error: "Could not create event.",
})

Custom manager

Use createToastManager when a subtree needs an isolated toast queue.

import { createToastManager, Toaster } from "@/components/redpanda-ui/toast"

const localToast = createToastManager()

export function LocalToaster() {
  return <Toaster toastManager={localToast} />
}

Toast or Sonner

Toast is an additive Base UI option. The existing Sonner component remains supported and unchanged. Use Toast for composable primitives and isolated managers. Use Sonner when an application already relies on Sonner’s API or the RedpandaProvider integration.

Credits

• We use Base UI for accessible toast primitives.
• We take inspiration from Shadcn UI for the component API and styling.