Skip to main content

​
Toaster

The <Toaster /> component renders all active toasts. It must be placed in your app to display toast notifications. 
import { Toaster } from 'solid-toast';

function App() {
  return (
    <>
      <Toaster />
      {/* Your app content */}
    </>
  );
}

​
Props

All props are optional and allow you to customize the default behavior and appearance of toasts. 
interface ToasterProps {
  position?: ToastPosition;
  toastOptions?: DefaultToastOptions;
  gutter?: number;
  containerStyle?: JSX.CSSProperties;
  containerClassName?: string;
}
​
position
ToastPosition
Default position for all toasts. Can be overridden per toast.Options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'Default: 'top-center'
​
toastOptions
DefaultToastOptions
Default options to apply to all toasts. Can be overridden per toast.
​
gutter
number
Spacing in pixels between toasts.Default: 8
​
containerStyle
JSX.CSSProperties
Custom CSS styles for the toast container element.
​
containerClassName
string
CSS class name to apply to the toast container element.

​
Examples

​
Custom Position

<Toaster position="bottom-right" />

​
Custom Styling

<Toaster
  toastOptions={{
    style: {
      background: '#363636',
      color: '#fff',
    },
    duration: 4000,
  }}
/>

​
Custom Gutter

<Toaster gutter={16} />

​
Container Styling

<Toaster
  containerStyle={{
    top: 20,
    left: 20,
    bottom: 20,
    right: 20,
  }}
  containerClassName="custom-toast-container"
/>

​
Complete Configuration

<Toaster
  position="top-right"
  gutter={12}
  toastOptions={{
    duration: 5000,
    style: {
      background: '#333',
      color: '#fff',
      padding: '16px',
      borderRadius: '8px',
    },
    iconTheme: {
      primary: '#fff',
      secondary: '#333',
    },
  }}
/>
The <Toaster /> component should only be rendered once in your application. All toast notifications will be displayed through this single instance.

Build docs developers (and LLMs) love

Get started for freeTalk to us