Toast

The Toast component provides a way to show live, time-sensitive feedback to users, which includes updates or changes to the system status. To display the Toast component use the ToastContainer along with the showToast function. The function accepts ToastOptions as an argument, allowing you to pass various configurations, and returns the corresponding toast id.

Use toasts for displaying short-lived notifications or messages to the user.

OverviewPropertiesUsage

ToastOptions

extends,

Name	Type	Default	Description
id?	|	-	A unique id for the toast. Using this toast id consumer can control the behavior of individual toast notifications. Toast messages with same id will only be shown once.
title		-	Title displayed in the toast notification.
type?	| | |	'info'	Type of the notification. Also indicates the color and icon.
message?	| .	-	Message displayed in the toast notification.
lifespan?	|	info and success: 8000, critical and warning: 'infinite'	The Toast notification will automatically close after a certain period of time given in milliseconds. If 'infinite' is provided, the consumer will need to manually close the toast.
actions?	.	-	Optional actions passed to the toast element, appended on the bottom left. Should only be used to either add a Button or a Link.
role?	| |	info, success and warning: 'status', critical: 'alert'	Live region roles
position?		'bottom-left'	Position of toast