# Toast
**Category**: react
**URL**: https://www.heroui.com/docs/react/components/toast
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(overlays)/toast.mdx
> Display temporary notifications and messages to users with automatic dismissal and customizable placement
***
## Import
```tsx
import { Toast, toast } from '@heroui/react';
```
## Setup
Render the provider in the root of your app.
```tsx
import { Toast, Button, toast } from '@heroui/react';
function App() {
return (
);
}
```
### Usage
```tsx
"use client";
import {Persons} from "@gravity-ui/icons";
import {Button, toast} from "@heroui/react";
export function Default() {
return (
);
}
```
### Simple Toasts
```tsx
"use client";
import {Button, toast} from "@heroui/react";
export function Simple() {
return (
);
}
```
### Variants
```tsx
"use client";
import {HardDrive, Persons} from "@gravity-ui/icons";
import {Button, toast} from "@heroui/react";
const noop = () => {};
export function Variants() {
return (
);
}
```
### Custom Indicators
```tsx
"use client";
import {Star} from "@gravity-ui/icons";
import {Button, toast} from "@heroui/react";
export function CustomIndicator() {
return (