---
title: Toast
description: A succinct message displayed temporarily.
icon: bell-ring
sidebar:
  badge: New
search:
  keywords: [notification, snackbar]
related:
  - /sonner
  - /alert
---

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/toast' },
  { name: 'Base UI', url: 'https://base-ui.com/react/components/toast' },
]} />

<ComponentPreview name="toast-demo" />

## Installation

```package-install
npx shadcn@latest add @redpanda/toast
```

## Usage

Mount `Toaster` once near the root of your application.

```tsx
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.

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

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

## Anatomy

```text
<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`.

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

## Action

Pass button props through `actionProps` to render an inline action.

```tsx
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.

```tsx
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.

```tsx
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](/docs/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](https://base-ui.com/react/components/toast) for accessible toast primitives.
- We take inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/base/toast) for the component API and styling.