# Toaster

Brief notifications that accompany an action.

## How to use it

Mount one Toaster in your application and call toast from event handlers. Do not use toasts as the only place for errors that require correction.



## Import


```tsx
import { Toaster } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<><Toaster /><Button onClick={() => toast.success("Project saved")}>Show notification</Button></>
```


## API: Toaster


```typescript
declare function Toaster({ className, toastOptions, ...props }: ToasterProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| className | string | No | Additional CSS classes to customize the element. |
| closeButton | boolean | No | See the published type. |
| containerAriaLabel | string | No | See the published type. |
| customAriaLabel | string | No | See the published type. |
| dir | "auto" \| "ltr" \| "rtl" | No | Interface reading direction. |
| duration | number | No | See the published type. |
| expand | boolean | No | See the published type. |
| gap | number | No | See the published type. |
| hotkey | string[] | No | See the published type. |
| icons | ToastIcons | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| invert | boolean | No | See the published type. |
| mobileOffset | Offset | No | See the published type. |
| offset | Offset | No | See the published type. |
| position | "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center" | No | See the published type. |
| richColors | boolean | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| swipeDirections | SwipeDirection[] | No | See the published type. |
| theme | "light" \| "dark" \| "system" | No | Component theme or theme identifier, depending on the API. |
| toastOptions | ToastOptions | No | See the published type. |
| visibleToasts | number | No | See the published type. |

Source: https://kivora.pro/docs/componentes/toaster