Toast API

API documentation for Toast component

ToastRoot#

Props#

Defines valid properties in Toast component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastRootInstance) => ReactNode)	null	The children to render.
richColors	boolean	false	Whether to show rich colors
position	ToastPosition	'top-right'	Position of the toast container
limit	number	3	Maximum number of toasts to be visible
gap	number	14	Gap between toasts in pixels
timeout	number	6000	Timeout for toast auto-dismiss (alias for duration)
group	string	null	Group identifier for toast grouping
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Toast component.

name	type	default	description
isExpanded	boolean	null	Whether the toast container is expanded (showing all toasts)
isInteracting	boolean	null	Whether user is currently interacting with toasts
heights	{ toastId: ToastId; height: number }[]	null	Cached heights of rendered toasts for stacking calculations

Exposes#

Defines the methods and properties exposed by Toast component.

name	type	default	description
toasts	ToastType[]	null	Array of filtered toasts for the current group
onRegionMouseEnter	() => void	null	Handler for mouse enter on the toast region
onRegionMouseMove	() => void	null	Handler for mouse move on the toast region
onRegionMouseLeave	() => void	null	Handler for mouse leave on the toast region
onRegionDragEnd	() => void	null	Handler for drag end on the toast region
onRegionPointerDown	(event: PointerEvent) => void	null	Handler for pointer down on the toast region
onRegionPointerUp	() => void	null	Handler for pointer up on the toast region
onRegionFocus	(event: FocusEvent<HTMLElement>) => void	null	Handler for focus events within the toast region
onRegionBlur	(event: FocusEvent<HTMLElement>) => void	null	Handler for blur events leaving the toast region
setHeights	Dispatch<SetStateAction<{ height: number; toastId: ToastId }[]>>	null	Function to update the heights state
handleFocusManagement	(toastElement: HTMLElement) => void	null	Handler for managing focus when a toast is dismissed

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Toast component.

name	type	default	description
root	ToastRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of Toast component.

values
ComponentInstance<ToastRootProps, ToastRootState, ToastRootExposes>

ToastRegion#

Props#

Defines valid properties in ToastRegion component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastRegionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastRegionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastRegionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastRegionInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ToastRegion component.

name	type	default	description
toast	ToastRootInstance	null	The Toast component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastRegion component.

name	type	default	description
root	ToastRegionPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastRegion component.

values
ComponentInstance<ToastRegionProps, ToastRegionState, ToastRegionExposes>

ToastItem#

Props#

Defines valid properties in ToastItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastItemInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastItem component.

name	type	default	description
root	ToastItemPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastItem component.

values
ComponentInstance<ToastItemProps, ToastItemState, ToastItemExposes>

ToastTitle#

Props#

Defines valid properties in ToastTitle component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastTitleInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ToastTitle component.

name	type	default	description
toast	ToastRootInstance	null	The Toast component instance.
toastItem	ToastItemInstance	null	The ToastItem component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastTitle component.

name	type	default	description
root	ToastTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastTitle component.

values
ComponentInstance<ToastTitleProps, ToastTitleState, ToastTitleExposes>

ToastDescription#

Props#

Defines valid properties in ToastDescription component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastDescriptionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastDescriptionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastDescriptionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastDescriptionInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastDescription component.

name	type	default	description
root	ToastDescriptionPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastItem component.

values
ComponentInstance<ToastDescriptionProps, ToastDescriptionState, ToastDescriptionExposes>

ToastIcon#

Props#

Defines valid properties in ToastIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastIconInstance) => ReactNode)	null	The children to render.
icons	Partial<Record<ToastVariant, ReactNode>>	null	Custom icons for each toast variant
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastIcon component.

name	type	default	description
root	ToastIconPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastItem component.

values
ComponentInstance<ToastIconProps, ToastIconState, ToastIconExposes>

ToastAction#

Props#

Defines valid properties in ToastAction component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastActionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastActionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastActionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastActionInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastAction component.

name	type	default	description
root	ToastActionPassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastAction component.

values
ComponentInstance<ToastActionProps, ToastActionState, ToastActionExposes>

ToastClose#

Props#

Defines valid properties in ToastClose component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToastCloseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastCloseInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToastClosePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToastCloseInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToastClose component.

name	type	default	description
root	ToastClosePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToastClose component.

values
ComponentInstance<ToastCloseProps, ToastCloseState, ToastCloseExposes>

Toast API

ToastRoot#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

ToastRegion#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

ToastItem#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

ToastTitle#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

ToastDescription#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

ToastIcon#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

ToastAction#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

ToastClose#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

useToast#

Props#

State#

Exposes#

Interfaces#

Types#

useToastItem#

Props#

State#

Exposes#

Interfaces#

Types#