Configuring the <Toaster />

The <Toaster /> component is the container that renders all your toasts. You can configure its behavior and set default options for all toasts by passing props to it.

<script>
    import { Toaster } from 'svelte-french-toast';
</script>

<Toaster 
    position="bottom-center"
    gutter={12}
    toastOptions={{
        style: 'background: #333; color: #fff;',
        duration: 4000
    }}
/>

Component Props

Here are the available props for the <Toaster /> component.

Prop	Type	Default	Description
position	ToastPosition	'top-center'	The default position for all toasts. See ToastPosition in the API Reference for all possible values.
gutter	number	8	The margin in pixels between toasts.
reverseOrder	boolean	false	By default, new toasts are added to the top. Set to true to add new toasts to the bottom.
containerStyle	string	undefined	Inline CSS styles to apply to the toast container div.
containerClassName	string	undefined	CSS class name to apply to the toast container div.
toastOptions	DefaultToastOptions	undefined	Default options to apply to all toasts. You can also specify default options for each toast type.

Default Toast Options

The toastOptions prop is a powerful way to define a consistent look and feel for your notifications.

Global Defaults

Set defaults for all toast types.

<Toaster toastOptions={{
    duration: 5000,
    style: 'font-family: sans-serif;'
}} />

Type-Specific Defaults

You can also override defaults for specific toast types.

<Toaster 
    toastOptions={{
        duration: 3000, // Default for all
        success: {
            duration: 5000, // Override for success toasts
            iconTheme: {
                primary: 'green',
                secondary: 'white'
            }
        }
    }}
/>