<Toaster /> API

This component will render all received toasts. Alternatively you can create own renderer with the headless useToaster() hook.

position Prop

You can change the position of all toasts by modifieng supplying positon prop.

reverseOrder Prop

Toasts spawn at top by default. Set to true if you want new Toasts at the end.

toastOptions Prop

These will act as default options for all toasts.

Type specific options

You can change the defaults for a specific type by adding, success: {}, error: {} or loading: {}.

Example with all available options

<Toaster
  position="top-center"
  reverseOrder={false}
  toastOptions={{
    // Define default options
    className: '',
    style: {
      margin: '40px',
      background: '#363636',
      color: '#fff',
      zIndex: 1,
    },
    duration: 5000,
    // Default options for specific types
    success: {
      duration: 3000,
      theme: {
        primary: 'green',
        secondary: 'black',
      },
    },
  }}
/>