Toast Component

A toast notification component.

Properties

Name	Type	Default	Description
show-dismiss-button	boolean	false	Indicates whether to show the dismiss button.
variant	'success' | 'error' | 'info' | 'warning' | 'inverse'	'inverse'	The variant of the toast notification. Defaults to inverse.

CSS Parts

Name	Description
toast	The main container for the toast notification.
icon	The container for the icon.
message	The container for the message.
dismiss	The container for the dismiss button.

Check this link to learn how to use CSS parts for Toast Component.

CSS Properties

Token	Default	Description
--tap-toast-vertical-padding	--tap-sys-spacing-5	The vertical padding inside the toast.
--tap-toast-horizontal-padding	--tap-sys-spacing-5	The horizontal padding inside the toast.
--tap-toast-background-color-default	--tap-sys-color-surface-inverse-secondary	The default background color of the toast.
--tap-toast-color-default	--tap-sys-color-content-on-inverse	The default text color of the toast.
--tap-toast-background-color-success	--tap-sys-color-surface-positive	The background color of the success variant.
--tap-toast-color-success	--tap-sys-color-content-on-inverse	The text color of the success variant.
--tap-toast-background-color-error	--tap-sys-color-surface-negative	The background color of the error variant.
--tap-toast-color-error	--tap-sys-color-content-on-inverse	The text color of the error variant.
--tap-toast-background-color-info	--tap-sys-color-surface-accent	The background color of the info variant.
--tap-toast-color-info	--tap-sys-color-content-on-inverse	The text color of the info variant.
--tap-toast-background-color-warning	--tap-sys-color-surface-warning	The background color of the warning variant.
--tap-toast-color-warning	--tap-sys-color-content-primary	The text color of the warning variant.
--tap-toast-background-color-inverse	--tap-sys-color-surface-inverse-secondary	The background color of the inverse variant.
--tap-toast-color-inverse	--tap-sys-color-content-on-inverse	The text color of the inverse variant.
--tap-toast-dismiss-color	'inherit'	The color of the dismiss button.
--tap-toast-dismiss-background-color	transparent	The background color of the dismiss button.

Events

Name	Description
dismiss	Fires when the toast dismiss button is clicked