Position
By default, the default position is bottom-right. You can customize the position of the toasts by using the position prop of the Toaster component:
Theme
You can set the theme of the toasts using the theme prop, which accepts the values: light, dark, and system:
MaxToasts
By default, the maximum number of toasts is set to 4. You can change this value using the maxToasts prop:
<Toaster maxToasts={8} />
ToastFont
By default, the font of the toasts is:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
You can change this value using the toastFont prop. In this case, we are using the utility class font-sans from Tailwind CSS to set the font:
<Toaster toastFont="font-sans" />
API Reference
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 | - |
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' | - |
toastFont | Font style for the all toasts | string | - |