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