Styling
Styling can be done globally via toastOptions
, this way every toast will have the same styling.
<Toaster
toastOptions={{
style: {
background: 'red',
},
className: 'class',
}}
/>
You can also use the same props when calling toast
to style a specific toast.
toast('Hello World', {
style: {
background: 'red',
},
className: 'class',
});
Tailwind CSS
The preferred way to style the toasts with tailwind is by using the unstyled
prop. That will give you an unstyled toast which you can then style with tailwind.
<Toaster
toastOptions={{
unstyled: true,
classNames: {
toast: 'bg-blue-400',
title: 'text-red-400',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
}}
/>
You can do the same when calling toast()
.
toast('Hello World', {
unstyled: true,
classNames: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
});
Styling per toast type is also possible.
<Toaster
toastOptions={{
unstyled: true,
classNames: {
error: 'bg-red-400',
success: 'text-green-400',
warning: 'text-yellow-400',
info: 'bg-blue-400',
},
}}
/>
Changing Icons
You can change the default icons using the icons
prop:
<Toaster
icons={{
success: <SuccessIcon />,
info: <InfoIcon />,
warning: <WarningIcon />,
error: <ErrorIcon />,
loading: <LoadingIcon />,
}}
/>
You can also set an icon for each toast:
toast('Hello World', {
icon: <Icon />,
});