Icons
Built-in icons
Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type.
toast.info("Lorem ipsum dolor"); // same as toast(message, {type: "info"});
toast.error("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor", {
theme: "colored"
})
toast.warn("Lorem ipsum dolor")
toast.warn("Lorem ipsum dolor", {
theme: "dark"
})
Disable icons
- Disable the icon individually
toast.error("Without icon", {
icon: false
});
- Disable the icon gloabally
<ToastContainer icon={false} />
Custom icons
You can provide a custom icon of your choice. Any renderable element is valid.
// With a string
toast.success("You can provide any string", {
icon: "🚀"
});
// custom icons have access to the theme and the toast type
toast.success("And of course a component of your choice", {
icon: MyIcon
});
toast.success("Even a function, given you return something that can be rendered", {
icon: ({theme, type}) => <img src="url"/>
});