Toast API

API documentation for Toast component

Toast#

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?: ToastInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToastInstance) => 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<ToastPassThrough>	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: ToastInstance) => ReactNode)	null	The children to render.
richColors	boolean	false	Whether to show rich colors
position	ToastPosition	'top-right'	Position of the toast container
expand	boolean	false	Whether to expand the toast on hover
duration	number	6000	Duration in milliseconds for toast auto-dismiss
gap	number	14	Gap between toasts in pixels
timeout	number	6000	Timeout for toast auto-dismiss (alias for duration)
swipeDirection	ToastSwipeDirection[]	['right']	Allowed swipe directions for dismissing toasts
icons	Partial<Record<ToastVariant, ReactNode>>	null	Custom icons for each toast variant
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

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
onRegionMouseLeave	() => void	null	Handler for mouse leave on the toast region
onRegionMouseMove	() => void	null	Handler for mouse move 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
setToasts	Dispatch<SetStateAction<ToastType[]>>	null	Function to update the toasts state
handleFocusElement	(toastElement: HTMLElement) => void	null	Handler for managing focus when a toast is dismissed
handleToastFocus	() => void	null	Handler for storing focus when a toast receives focus

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Toast component.

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

Types#

Instance

Instance of Toast component.

values
ComponentInstance<ToastProps, ToastState, ToastExposes>

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	ToastInstance	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	ToastPassThroughType<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
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	ToastPassThroughType<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.
[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	ToastPassThroughType<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	ToastPassThroughType<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	ToastPassThroughType<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

Toast#

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#