Toast Component

Toast component for displaying temporary notifications to users. The Toast component provides a non-intrusive way to show informational, success, warning, or error messages that automatically dismiss after a configurable timeout period.

Usage

To import and use the Toast component in your application, use the following code snippet:

import { Toast } from "@syncfusion/react-notifications";

<Toast content="Operation completed successfully" open={true} position={{ xAxis: 'Right', yAxis: 'Bottom' }} />

import { Toast } from "@syncfusion/react-notifications";

<Toast content="Operation completed successfully" open={true} position={{ xAxis: 'Right', yAxis: 'Bottom' }} />

Demos

Explore the demos of the React Toast component. Refer to this page.

Props

The following table outlines the props for the Toast component:

Name	Type	Default	Description
actions	node	-	Specifies the action elements rendered at the bottom of the Toast component.
animation	ToastAnimationOptions	{ show: { name: 'FadeIn', duration: 400, timingFunction: 'ease-out' }, hide: { name: 'FadeOut', duration: 400, timingFunction: 'ease-out' } }	Specifies the animations that should happen when Toast opens and closes.
closeButton	boolean	false	Specifies whether to display a close button that allows users to manually dismiss the component (typically a Toast, Dialog, or notification). When enabled, this gives users control over when to remove the notification rather than relying solely on automatic timeout dismissal.
content	node	-	Specifies the content to be displayed within the component. Can be a string of text or any valid React node (elements, components, fragments, etc.). If not provided, the component will render without content.
extendedTimeout	number	1000	Specifies the Toast display time duration after interacting with the Toast.
height	string \| number	'auto'	Specifies the height of the Toast component. Can be set to a pixel value or percentage as a string, or a number representing pixels.
icon	node	-	Specifies the icon displayed alongside the Toast content. Can be any valid React node, typically an SVG or image. Helps to visually reinforce the message type (e.g., success, error).
newestOnTop	boolean	false	Specifies the stacking order of items in a collection or notification system. When set to true, newer items are displayed at the top of the container, with subsequent items appearing below in descending order of creation time. When set to false, newer items are added to the bottom of the container, with older items positioned above.
open	boolean	false	Specifies whether the component is in open/expanded state. When true, the component will be displayed in its open state. When false, the component will be in its closed state. If not provided, the component will use its default closed state. This property is useful for controlling the component's state programmatically as controlled component.
position	PositionAxis	{ xAxis: PositionX.Right, yAxis: PositionY.Bottom }	Specifies the position of the Toast on the screen.
progressBar	boolean	false	Specifies whether to display a progress bar that indicates the remaining time before the component (typically a Toast or notification) automatically dismisses. The progress bar provides visual feedback about the time remaining before the notification disappears.
severity	Severity	Severity.Normal	Specifies the severity of the Toast content, which is used to define the appearance (icons and colors) of the Toast. The available severity messages are Success, Info, Warning, and Error.
target	string	'body'	Specifies the target element to render the Toast.
timeout	number	5000	Specifies the time in milliseconds before the Toast auto-closes.
title	node	-	Specifies the title displayed at the top of the Toast. Can be a simple string or any valid React node. Useful for providing a brief header or context to the notification content.
width	string \| number	'auto'	Specifies the width of the Toast component. Can be set to a pixel value or percentage as a string, or a number representing pixels.

Methods

The following table outlines the methods for the Toast component:

Name	Parameters	Returns	Description
hide	toastId? : string	void	Hides a specific Toast or the oldest one if no id is provided. Params: toastId: The id of the Toast to hide (optional).
show	content : node	string	Shows a new Toast. Params: content: The content to be displayed in the Toast.

Events

The following table outlines the events for the Toast component:

Name	Type	Description
onClick	(event: React.MouseEvent) => void	Specifies the callback that triggered when the user clicks anywhere within the Toast.
onClose	( ) => void	Specifies the callback that triggered when the Toast is closed and removed from view.
onOpen	( ) => void	Specifies the callback that triggered when the Toast is opened and becomes visible to the user.