---
title: Toast
description: A succinct message that is displayed temporarily.
base: base
component: true
links:
doc: https://base-ui.com/react/components/toast
api: https://base-ui.com/react/components/toast#api-reference
---
## Installation
Command
Manual
Run the following command:
```bash
npx shadcn@latest add toast
```
Add the Toaster component.
```tsx title="app/layout.tsx" {1,9} showLineNumbers
import { Toaster } from "@/components/ui/toast"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependency:
```bash
npm install @base-ui/react
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
Add the Toaster component.
```tsx title="app/layout.tsx" {1,8} showLineNumbers
import { Toaster } from "@/components/ui/toast"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage
```tsx
import { toast } from "@/components/ui/toast"
```
```tsx
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.
```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.
## API Reference
See the [Base UI Toast documentation](https://base-ui.com/react/components/toast)
for details about manager options, stacking, swipe dismissal, and the primitive
API.