import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { ToastDemo } from "./ToastBlocks/Preview";
import Examples from "./ToastBlocks/Examples";
# Toast
A brief message alert to inform users about events or actions.
PreviewCode
## Installation
1. Create a new file `Toast.tsx` in your component folder.
2. Copy and paste the following code into the file.
## Usage
```tsx
import { Toaster } from "@components/Toast";
```
```html
```
> Note:
>
> You can put Toaster in anywhere. It will automatically go to document.body through portal.
> But, it is recommended to place it at the root of the application, just once.
---
```tsx
import { useToast } from "@components/Toast";
function App() {
const { toast } = useToast();
return ;
}
```
## Props
### Toaster
#### Special
| Prop | Type | Default | Description |
|:----------------|:-----------------------|:---------------------|:--------------------------|
| `defaultOption` | `Partial` | `defaultToastOption` | Global options for toast. |
```ts
interface ToastOption {
closeButton: boolean;
closeTimeout: number | null;
}
const defaultToastOption: ToastOption = {
closeButton: true,
closeTimeout: 3000,
};
```
## Examples
### Normal
PreviewCode
### Success
PreviewCode
### Error
PreviewCode
### Warning
PreviewCode
### Pending - Fail
PreviewCode
### Pending - Success
PreviewCode