Styling

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

Set default for all toasts

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

Set default for specific types

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

Style per toast

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.

<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 overwrite the position with containerStyle.

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

Change offset between toasts

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

<Toaster gutter={24} />

Change icon color

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

<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.

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 forwards',
      }}
    />
  )}
</Toaster>;

Strict CSP Mode

For applications with strict Content Security Policies that disallow inline styles, enable strictCSP mode:

<Toaster strictCSP={true} />

In strict CSP mode:

• All inline style props are ignored
• Styling must be done via CSS classes and CSS variables
• Toast positioning uses CSS flexbox instead of inline transforms
• The library is fully compatible with CSP style-src 'nonce-...' directives

Styling with CSS Variables (Strict CSP)

When using strict CSP mode, use CSS variables for theming:

:root {
  /* Success toasts */
  --rht-success-bg: #ecfdf5;
  --rht-success-fg: #065f46;

  /* Error toasts */
  --rht-error-bg: #fef2f2;
  --rht-error-fg: #991b1b;

  /* Loading toasts */
  --rht-loading-bg: #eff6ff;
  --rht-loading-fg: #1e40af;

  /* Blank toasts */
  --rht-blank-bg: #fff;
  --rht-blank-fg: #363636;
}