Props

Customize the behavior of SolidNotifications with these configurable props.

Toaster config

Global props. Can be applied to ToastProvider and Toaster.

limit - The maximum number of toasts to display at once. Excess toasts are queued and rendered when space becomes available. For no limit, set limit to false or 0.
```
limit: number | false;
```
Default value: 8
reverseToastOrder - If true, toasts are rendered in reverse order (newest at the top/bottom).
```
reverseToastOrder: boolean;
```
Default value: false
offsetX - Horizontal offset for the toaster's position.
```
offsetX: number;
```
Default value: 16
offsetY - Vertical offset for the toaster's position.
```
offsetY: number;
```
Default value: 16
gutter - Spacing between toasts.
```
gutter: number;
```
Default value: 16
positionY - Vertical positioning of the toaster.
```
positionY: "top" | "bottom";
```
Default value: "top"
positionX - Horizontal positioning of the toaster.
```
positionX: "left" | "center" | "right";
```
Default value: "right"
renderOnWindowInactive - If true, toasts will render even when the window is inactive (blurred).
```
renderOnWindowInactive: boolean;
```
Default value: false
pauseOnWindowInactive - If true, toast progress will pause when the window is inactive (blurred).
```
pauseOnWindowInactive: boolean;
```
Default value: true

toasterStyle - Custom styles for the toaster container.

toasterStyle: Omit<JSX.CSSProperties, "top" | "bottom" | "left" | "right">;

Default value: null

Toast config

Toast props. Can be applied to all components; ToastProvider, Toaster and Toast.

theme - The theme of the toast. Two theme types are included; light and dark, but any string can be provided.
```
theme: string | undefined | null;
```
Default value: "light"
type - The type of the toast. Can be "default", "success", "error", "info", "warning" and "loading".
```
type: "default" | "success" | "error" | "loading" | "warning" | "info";
```
Default value: "default"
duration - Duration (in milliseconds) before the toast is dismissed. Set to false or 0 for persistent toasts.
```
duration: number | false;
```
Default value: 5000
onEnter - CSS animation name when the toast enters.
```
onEnter: string;
```
Default value: undefined
enterDuration - Duration of the enter animation in milliseconds. Should be set to the same duration as the animation.
```
enterDuration: number;
```
Default value: 300
onExit - CSS animation name when the toast exits.
```
onExit: string;
```
Default value: undefined
exitDuration - Duration of the exit animation in milliseconds. Should be set to the same duration as the animation.
```
exitDuration: number;
```
Default value: 300
onIdle - CSS class which will be applied when the toast is idle.
```
onIdle: string;
```
Default value: undefined

class - CSS class applied to the toast body. Can be a string or a function returning a string. The function will be provided with theme and type as arguments.

class: string |
 ((args:{
   theme: string | undefined | null;
   type: "default" | "success" | "error" | "loading" | "warning" | "info";
 }) => string);

Default value: "sn-toast"

style - Custom styles for the toast body. Can be an object containing css properties or a function returning the object. The function will be provided with theme and type as arguments.

style: JSX.CSSProperties |
  ((args: {
    theme: string | undefined | null;
    type: "default" | "success" | "error" | "loading" | "warning" | "info";
  }) => JSX.CSSProperties);

Default value: undefined

pauseOnHover - Whether the toast pauses when hovered. If the toast or element inside the toast has focus, the timer will not play when mouse leaves the toast.
```
pauseOnHover: boolean;
```
Default value: true

wrapperClass - CSS class for the toast wrapper. Can be a string or a function returning a string. The function will be provided with theme and type as arguments.

wrapperClass: string |
  ((args: {
    theme: string | undefined | null;
    type: "default" | "success" | "error" | "loading" | "warning" | "info";
  }) => string);

Default value: "sn-toast-wrapper"

wrapperStyle - Custom styles for the toast wrapper. Can be an object containing css properties or a function returning the object. The function will be provided with theme and type as arguments.

wrapperStyle: JSX.CSSProperties |
  ((args: {
    theme: string | undefined | null;
    type: "default" | "success" | "error" | "loading" | "warning" | "info";
  }) => JSX.CSSProperties);

Default value: undefined

enterCallback - Callback function executed when the toast enters.
```
enterCallback: () => void;
```
Default value: null
updateCallback - Callback function executed when the toast updates.
```
updateCallback: () => void;
```
Default value: null
exitCallback - Callback function executed when the toast exits. It will provide a reason argument with which the dismiss() function was called, or if it wasn't provided, the reason will be false if the toast dismissed by timer expiration, or true if it was dismissed by the user.
```
exitCallback: (reason?: boolean | string) => void;
```
Default value: null
showDismissButton - Whether to show a dismiss button.
```
showDismissButton: boolean;
```
Default value: true

dismissButtonClass - CSS class for the dismiss button. Can be a string or a function returning a string. The function will be provided with theme and type as arguments.

dismissButtonClass: string |
  ((args: {
    theme: string | undefined | null;
    type: "default" | "success" | "error" | "loading" | "warning" | "info";
  }) => string);

Default value: "sn-dismiss-button"

dismissButtonStyle - Custom styles for the dismiss button. Can be an object containing css properties or a function returning the object. The function will be provided with theme and type as arguments.

 dismissButtonStyle: JSX.CSSProperties | undefined |
   ((args: {
     theme: string | undefined | null;
     type: "default" | "success" | "error" | "loading" | "warning" | "info";
   }) => JSX.CSSProperties);

Default value: undefined

dismissOnClick - Whether clicking the toast dismisses it.
```
dismissOnClick: boolean;
```
Default value: false
showProgressBar - Whether to show a progress bar on the toast.
```
showProgressBar: boolean;
```
Default value: true

progressBarClass - CSS class for the progress bar. Can be a string or a function returning a string. The function will be provided with theme and type as arguments.

 progressBarClass: string |
   ((args: {
     theme: string | undefined | null;
     type: "default" | "success" | "error" | "loading" | "warning" | "info";
   }) => string);

Default value: "sn-progress-bar"

progressBarStyle - Custom styles for the progress bar. Can be an object containing css properties or a function returning the object. The function will be provided with theme and type as arguments.

 progressBarStyle: JSX.CSSProperties | undefined |
   ((args: {
     theme: string | undefined | null;
     type: "default" | "success" | "error" | "loading" | "warning" | "info";
   }) => JSX.CSSProperties);

Default value: undefined

showIcon - Whether to show an icon in the toast.
```
showIcon: boolean;
```
Default value: true

icon - Custom icon for the toast. Can be a JSX element or a function returning a JSX element. The function will be provided with theme and type as arguments.

icon: JSX.Element | null |
  ((args: args: {
    theme: string | undefined | null;
    type: "default" | "success" | "error" | "loading" | "warning" | "info";
    }) => JSX.Element) ;

Default value: null

dragToDismiss - Whether dragging the toast dismisses it.
```
dragToDismiss: boolean;
```
Default value: true
dragTreshold - Distance (in pixels) required to dismiss the toast via dragging.
```
dragTreshold: number;
```
Default value: 100
ariaLive - ARIA live attribute for accessibility.
```
ariaLive: "polite" | "assertive" | "off";
```
Default value: "polite"
role - ARIA role attribute.
```
role: "status" | "alert" | "log";
```
Default value: "status"

Other config

Props that are used depending on where they are applied.

id - Unique identifier for the toast. If not provided, an ID is generated automatically.
```
id: string;
```
content - The main content of the toast. Can be a string, JSX element, or a function returning JSX. If function, receives Toast as argument.
```
content: | string
         | JSX.Element
         | ((toast: Toast) => JSX.Element | string);;
```
toasterId - Specifies the toaster instance where the toast should be displayed. Required when using multiple toasters.
```
toasterId: string;
```