Styling

Styling can be done globally via toastOptions, this way every toast will have the same styling.

<Toaster
  toastOptions={{
    style: {
      background: 'red',
    },
    className: 'class',
  }}
/>

You can also use the same props when calling toast to style a specific toast.

toast('Hello World', {
  style: {
    background: 'red',
  },
  className: 'class',
});

Tailwind CSS

The preferred way to style the toasts with tailwind is by using the classNames prop. Exclamation mark in front of the class is required to override the default styles.

<Toaster
  toastOptions={{
    classNames: {
      toast: '!bg-blue-400',
      title: '!text-red-400',
      description: '!text-red-400',
      actionButton: '!bg-zinc-400',
      cancelButton: '!bg-orange-400',
      closeButton: '!bg-lime-400',
    },
  }}
/>

You can do the same when calling toast().

toast('Hello World', {
  classNames: {
    toast: '!bg-blue-400',
    title: '!text-red-400 !text-2xl',
    description: '!text-red-400',
    actionButton: '!bg-zinc-400',
    cancelButton: '!bg-orange-400',
    closeButton: '!bg-lime-400',
  },
});

No styles

You can also disable default styles by going headless.

toast.custom((t) => (
  <div>
    This is a custom component <button onClick={() => toast.dismiss(t)}>close</button>
  </div>
));

Toaster