Styling

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

Set default for all toasts

<template>
  <Toaster
    class=""
    :toast-options="{
      style: {
        border: '1px solid #713200',
        padding: '16px',
        color: '#713200',
      },
    }"
  />
</template>

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

<script setup lang="ts">
import { Toaster, ToastBar } from 'react-hot-toast';

</script>

<template>
  <Toaster position="bottom-center" :toast-options="{ duration: 500000 }">
    <template #toastBar="{ toast, position }">
      <ToastBar
        :toast="toast"
        :position="position"
        :style="{
          ...toast.style,
          animation: toast.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
        }"
      >
        <button @click="handleDismiss(toast)">
          X
        </button>
      </ToastBar>
    </template>
  </Toaster>
</template>