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