<ToastBar /> API

This is the default toast component rendered by the Toaster. You can use this component in a Toaster with a custom render function to overwrite its defaults.

Available options

style={{}} // Overwrite styles
position="top-center" // Used to adapt the animation

Add custom content

You can add a render function to the ToastBar to modify its content. An object containing The icon as well as the message are passed into the function.

Add a dismiss button

In this example we add a basic dismiss button to all toasts, except if the loading one.

import { toast, Toaster, ToastBar } from 'react-hot-toast';
{(t) => (
<ToastBar toast={t}>
{({ icon, message }) => (
{t.type !== 'loading' && (
<button onClick={() => toast.dismiss(}>X</button>