---
title: "Toast"
description: "A transient notification with a status icon that auto-dismisses after a timeout or when closed."
---

A transient notification with a status icon that auto-dismisses after a timeout or when closed. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Toast — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add toast
```

npm dependencies: class-variance-authority.

Files written — React: components/ui/toast.tsx. Vue: components/ui/toast/Toast.vue, components/ui/toast/ToastIcon.vue, components/ui/toast/ToastContent.vue, components/ui/toast/ToastTitle.vue, components/ui/toast/ToastDescription.vue, components/ui/toast/ToastClose.vue, components/ui/toast/index.ts.

## Usage

React:

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

Vue:

```ts
import { Toast, ToastIcon, ToastContent, ToastTitle, ToastDescription, ToastClose } from "@/components/ui/toast"
```

## API reference

**`Toast`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number \| undefined` | — | Auto-dismiss after this many ms. Defaults to 5000. Pass 0 to disable. |
| `open` | `boolean \| undefined` | — | Controlled open state. |
| `onOpenChange` | `(open: boolean) => void \| undefined` | — | Called when the toast closes, either by timeout or the close button. |

The registry exports `Toast`, `ToastIcon`, `ToastContent`, `ToastTitle`, `ToastDescription`, `ToastClose`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Use `role="status"` for routine updates and `role="alert"` only for urgent failures. Do not move focus into a toast, and give its close button an accessible name.

## Tokens

Toast reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.