Toaster

The <Toaster /> component is used to show toasts in your application

tsx

import { Toaster } from "@pheralb/toast";
 
<Toaster />;

Position

By default, the position is bottom-right. You can customize the position of the toasts by using the position prop of the Toaster component:

tsx

You can set the theme of the toasts using the theme prop, which accepts the values: light, dark, and system:

tsx

💡 If you want to configure the theme automatically, read Dark Mode guide.

By default, the maximum number of toasts is set to 4. You can change this value using the maxToasts prop:

jsx

<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`	-