# Toast (/docs/components/toast)
## Overview [#overview]
Use Toast for short feedback that appears after an action.
Toasts are useful for saves, copies, uploads, background tasks, and lightweight errors. They should not contain information the user must act on later.
LoveUI includes two toast styles:
* **Toast:** a standard, quiet notification built on Base UI.
* **Gooey Toast:** an animated notification with morphing transitions and more expressive motion.
## Anatomy [#anatomy]
A toast has a title or message, optional description, status, optional action, and duration. A provider or toaster renders the stack of active toasts.
## Behavior [#behavior]
Use status to match the result. Use promise helpers when an async action has loading, success, and error states.
Use the standard Toast when the interface should feel calm and utilitarian. Use Gooey Toast when the notification is part of a more animated product moment, such as uploads, saves, confirmations, and async progress.
## Accessibility [#accessibility]
Keep messages short and clear. Important errors should also appear near the affected form or content, not only in a toast.
## Installation [#installation]
CLI
Manual
```bash
npx love-ui@latest add toast
```
Add the
`ToastProvider`
to your app.
```tsx title="app/layout.tsx"
// [!code word:import { ToastProvider } from "@/components/ui/toast"]
// [!code word:]
// [!code word:]
import { ToastProvider } from "@/components/ui/toast"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependencies:
```bash
npm install @base-ui-components/react
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
Add the
`ToastProvider`
to your app.
```tsx title="app/layout.tsx"
// [!code word:import { ToastProvider } from "@/rcomponents/ui/toast"]
// [!code word:]
// [!code word:]
import { ToastProvider } from "@/components/ui/toast"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage [#usage]
```tsx
import { toastManager } from "@/components/ui/toast"
```
```tsx
toastManager.add({
title: "Event has been created",
description: "Monday, January 3rd at 6:00pm",
})
```
By default, toasts appear in the **bottom-right** corner. You can change this by setting the `position` prop on the `ToastProvider`.
Allowed values: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. For example:
```tsx
{children}
```
Use the `variant` option to show the animated gooey variation from the same toast API:
```tsx
toastManager.add({
variant: "gooey",
title: "Event has been created",
description: "Monday, January 3rd at 6:00pm",
})
```
You can combine `variant: "gooey"` with status types, actions, position, duration, and promise helpers.
```tsx
toastManager.add({
variant: "gooey",
type: "success",
title: "Saved",
description: "Your changes are live.",
position: "top-right",
})
```
## Standard Toast Examples [#standard-toast-examples]
The examples show status, loading, actions, promise state, and varied toast heights.
### With Status [#with-status]
### Loading [#loading]
### With Action [#with-action]
### Promise [#promise]
### With Varying Heights [#with-varying-heights]
## Gooey Toast Usage [#gooey-toast-usage]
Gooey Toast is a variation of the Toast component. You do not install or render a separate provider.
By default, standard toasts appear in the **bottom-right** corner. Gooey toasts appear in the **top-right** corner unless you pass a `position` option.
Allowed values: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.
```tsx
toastManager.add({
variant: "gooey",
position: "bottom-center",
title: "Synced",
description: "All records are up to date.",
})
```
## Gooey Toast Examples [#gooey-toast-examples]
These examples show the animated toast style, state variants, promise handling, action buttons, and placement.
### Basic Gooey Toast [#basic-gooey-toast]
### Gooey States [#gooey-states]
Gooey Toast supports success, error, warning, info, and action states.
### Gooey Promise [#gooey-promise]
Drive gooey toast states from promises for async operations.
### Gooey With Action Button [#gooey-with-action-button]
Add an interactive button to a gooey toast.
### Gooey Position [#gooey-position]
Control where gooey toasts appear on the screen.
## Gooey Toast API Reference [#gooey-toast-api-reference]
### `toastManager.add` [#toastmanageradd]
The same `toastManager.add` method shows both standard and gooey toasts.
Use no variant for a standard toast:
```tsx
toastManager.add({
title: "Saved",
description: "Your changes are live.",
})
```
Use `variant: "gooey"` for the animated variation:
```tsx
toastManager.add({
variant: "gooey",
type: "success",
title: "Saved",
description: "Your changes are live.",
})
```
### Gooey Options [#gooey-options]
```typescript
interface GooeyOptions {
variant?: "gooey"
title?: string
description?: ReactNode | string
position?: GooeyPosition
duration?: number | null
icon?: ReactNode | null
styles?: GooeyStyles
fill?: string
roundness?: number
autopilot?: boolean | { expand?: number; collapse?: number }
button?: {
title: string
onClick: () => void
}
}
```
### Toast Provider Props [#toast-provider-props]
```typescript
interface ToastProviderProps {
position?: ToastPosition // Standard toast position
gooeyPosition?: ToastPosition // Default position for gooey toasts
gooeyOptions?: Partial
}
```