| title | Toaster |
|---|---|
| description | The <Toaster /> component is used to show toasts in your application |
| category | API |
import { Toaster } from "@pheralb/toast";
<Toaster />;By default, the position is bottom-right. You can customize the position of the toasts by using the position prop of the Toaster component:
You can set the theme of the toasts using the theme prop, which accepts the values: light, dark, and system:
馃挕 If you want to configure the theme automatically, read
Dark Modeguide.
By default, the maximum number of toasts is set to 4. You can change this value using the maxToasts prop:
<Toaster maxToasts={8} />The <Toaster /> component accepts the following options:
| Property | Description | Type | Required |
|---|---|---|---|
theme |
Theme of the all toasts | Theme (default: system): 'light', 'dark', or 'system' |
- |
maxToasts |
Maximum number of toasts to display | number |
- |
toastIcons |
Replace the default icons with custom icons | Record<Variant, ReactNode> |
- |
position |
Position of the toaster on the screen | Position (default: bottom-right): 'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right' or 'bottom-center' |
- |
toastOptions |
Options to customize all toasts. | ToastOptions |
- |