Skip to content

Toast Props



When displaying a toast, the props are inherited from the container props. Toast props supersede container props

PropsTypeDefault ValueDescription
toastIdId-Provide a custom id
updateIdId-Used during update
dataT-any additional data you want to pass toast("hello", { data: {key: value} } as T)
typeToastType'default'One of info, success, warning, error, default
delaynumber-Let you delay the toast appearance. Pass a value in ms
onOpen() => void-Called when the notification appear
onClose() => void-Called when the notification disappear
onClick(event: MouseEvent) => void-Called when click inside Toast notification
toastStyleCSSProperties-Add optional inline style to the toast wrapper
progressnumber-Set the percentage for the controlled progress bar. Value must be between 0 and 1.
renderToastContent<T>-Only available when using toast.update
isLoadingbollean-Only available when using `toast.loading'
dangerouslyHTMLStringbooleanfalserender unsafe string, like html tag
iconIconType-Used to display a custom icon. Set it to false to prevent
rtlbooleanfalseSupport right to left content
containerIdIdtoast.POSITION.TOP_RIGHTUsed to identify the Container when working with multiple container. Also used to set the id attribute
positionToastPositiontoast.POSITION.TOP_RIGHTOne of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClosenumber | boolean5000Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButtonVNode | booleandefault close iconReplace the default close button or false to hide the button
transitionToastTransition | CSSTransitionPropstoast.TRANSITIONS.BounceA reference to a valid transition animation
hideProgressBarbooleanfalseDisplay or not the progress bar below the toast(remaining time)
pauseOnHoverbooleantrueKeep the timer running or not on hover
pauseOnFocusLossbooleantruePause the timer when the window loses focus
closeOnClickbooleantrueDismiss toast on click
toastClassNamestring-Add optional classes to the toast
bodyClassNamestring-Add optional classes to the toast body
styleCSSProperties-Add optional inline style to the container
progressClassNamestring-Add optional classes to the progress bar
progressStyleCSSProperties-Add optional inline style to the progress bar
rolestringalertDefine the ARIA role for the toasts
themeToastThemeautoOne of auto, light, dark, colored, auto means automatically detects system theme colors


All the toast methods return a toastId except remove and isActive. The toastId can be used to remove a toast programmatically or to check if the toast is displayed.

const options = {
  onOpen: () => console.log('opened'),
  onClose: () => console.log('closed'),
  autoClose: 6000,
  closeButton: SomeVNode, // CloseBtnType
  type: toast.TYPE.INFO,
  hideProgressBar: false,
  position: toast.POSITION.TOP_LEFT,
  pauseOnHover: true,
  transition: MyCustomTransition,
  progress: 0.2
  // and so on ...
} as ToastOptions;

// display toasts
const toastId = toast("Hello", options as ToastOptions);
toast(MyComponent, options as ToastOptions);
toast(({ closeToast } as ToastContentProps) => <div>Render props like</div>, options as ToastOptions);

//shortcut to different types
toast.success("Hello", options as ToastOptions);"World", options as ToastOptions);
toast.warn(MyComponent, options as ToastOptions);
toast.error("Error", options as ToastOptions);

// Remove all toasts !

// Remove given toast
toast.remove(toastId as Id);

//Check if a toast is displayed or not

// update a toast
toast.update(toastId, {
  type: toast.TYPE.INFO,
  render: SomeVNode, // ToastContent<T>

// completes the controlled progress bar
toast.done(toastId as Id);

Released under the MIT License.