Styling

You can style your notifications globally with the toastOptions inside the Toaster component, or for each notification manually.

Set default for all toasts

copy
<Toaster
  toastOptions={{
    className: '',
    style: {
      border: '1px solid #713200',
      padding: '16px',
      color: '#713200',
    },
  }}
/>

Set default for specific types

copy
<Toaster
  toastOptions={{
    success: {
      style: {
        background: 'green',
      },
    },
    error: {
      style: {
        background: 'red',
      },
    },
  }}
/>

Style per toast

copy
toast('I have a border.', {
  style: {
    border: '1px solid black',
  },
});

Change the offset

If you want to change the offset of your notifications, you can adapt the absolute position in containerStyle.

copy
<Toaster
  containerStyle={{
    top: 20,
    left: 20,
    bottom: 20,
    right: 20,
  }}
/>

Change position of the toaster

By default, the toaster is position fixed in the window. If you want to place it somewhere else, you can ovewrite the position with containerStyle.

copy
<Toaster
  containerStyle={{
    position: 'relative',
  }}
/>

Change offset between toasts

If you want to change the offset between notifications change the gutter.

copy
<Toaster gutter={24} />

Change icon color

All icon colors can be changed by supplying a iconTheme with a primary & secondary color.

copy
<Toaster
  toastOptions={{
    success: {
      iconTheme: {
        primary: 'green',
        secondary: 'black',
      },
    },
  }}
/>

Change enter and exit animations

In this example, we provide a render function with the default <ToastBar />. We overwrite the animation style based on the current state.

copy
import { Toaster, ToastBar } from 'react-hot-toast';

<Toaster>
  {(t) => (
    <ToastBar
      toast={t}
      style={{
        ...t.style,
        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
      }}
    />
  )}
</Toaster>;