Skip to main content

Icons

Built-in icons​

Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type.

v8-icons-light v8-icons-dark v8-icons-colored 
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"/>
});
If you provide a component, the current theme and type are passed as props