---
title: Toast
description: A short message about something that just happened, in the bottom-right corner.
---

```tsx
import { Button, Toast, toastManager } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function ToastBasic() {
  return (
    <Preview overlay={true}>
      <Toast.Provider>
        <Button.Root
          onClick={() => {
            toastManager.add({ title: "Title", description: "Description" });
          }}
        >
          Show toast
        </Button.Root>
      </Toast.Provider>
    </Preview>
  );
}
```

- Confirm an action that finished, or report one that failed. Use a [Callout](/deft/components/callout) for a message that stays next to what it explains.
- The title says what happened; the description, if any, says what to do next.
- A plain toast is the success and shows a green check. Set `type` for the others: `danger` shows a red icon, `warning` an amber one, `loading` a spinner.
- Up to three toasts show at once; a fourth hides the oldest one.

## Setup

```tsx
<Toast.Provider>{app}</Toast.Provider>;

toastManager.add({ title: "Title" });
toastManager.add({ title: "Title", description: "Description", type: "danger" });
```

Put one `Toast.Provider` at the root of the app and call `toastManager` from anywhere, including outside React. It also has `update`, `close` and `promise`, for example to turn a `loading` toast into a success. Toasts close on their own after `timeout`, with the close button, or with a swipe right or down. `actionProps` adds a ghost button next to the text.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `limit?` | `number` | `3` | On Provider. Toasts shown at once. |
| `timeout?` | `number` | `5000` | On Provider. Milliseconds before a toast closes; 0 keeps it open. |
| `title?` | `ReactNode` | - | On toastManager.add. |
| `description?` | `ReactNode` | - | On toastManager.add. |
| `type?` | `"danger" \| "warning" \| "loading"` | - | On toastManager.add. Omit it for a success. |
| `actionProps?` | `ComponentProps<'button'>` | - | On toastManager.add. Renders an action button. |

`Toast.Provider` takes the Base UI provider props except `toastManager`; it always uses the exported `toastManager`. Parts: `Provider`. Built on Base UI [Toast](https://base-ui.com/react/components/toast).