Avatar API

API documentation for Avatar component

AvatarRoot#

Props#

Defines valid properties in AvatarRoot 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?: AvatarRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AvatarRootInstance) => 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<AvatarRootPassThrough>	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: AvatarRootInstance) => ReactNode)	null	The children to render.
size	"large" \| "normal" \| "xlarge"	normal	Defines the size of the avatar.
shape	"circle" \| "square"	square	Defines the shape of the avatar.
delayDuration	number	null	The delay duration of the avatar.
[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 Avatar component.

name	type	default	description
load	boolean	null	Whether the avatar's image is loading or not.

Exposes#

Defines the methods and properties exposed by AvatarRoot component.

name	type	default	description
state	useAvatarState	null	The state of the useAvatar.
handleImageLoad	(src?: string) => void	null	The method to handle image load.
handleImageUnload	() => void	null	The method to handle image unload.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AvatarRoot component.

name	type	default	description
root	AvatarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
fallback	AvatarRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the fallback's DOM element.
image	AvatarRootPassThroughType<HTMLAttributes<HTMLImageElement>>	null	Used to pass attributes to the image's DOM element.

Types#

Instance

Instance of AvatarRoot component.

values
ComponentInstance<AvatarRootProps, AvatarRootState, AvatarRootExposes>

AvatarFallback#

Props#

Defines valid properties in AvatarFallback 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?: AvatarFallbackInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AvatarFallbackInstance) => 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<AvatarFallbackPassThrough>	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: AvatarFallbackInstance) => 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 AvatarFallback component.

name	type	default	description
avatar	AvatarRootInstance	null	The Avatar component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AvatarFallback component.

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

Types#

Instance

Instance of AvatarFallback component.

values
ComponentInstance<AvatarFallbackProps, AvatarFallbackState, AvatarFallbackExposes>

AvatarImage#

Props#

Defines valid properties in AvatarImage 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?: AvatarImageInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AvatarImageInstance) => string)	null	The class name to apply to the component.
as	ReactNode	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AvatarImagePassThrough>	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: AvatarImageInstance) => ReactNode)	null	The children to render.
src	string	undefined	Specifies the path to the image to display.
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AvatarImage component.

name	type	default	description
avatar	AvatarRootInstance	null	The Avatar component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AvatarImage component.

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

Types#

Instance

Instance of AvatarImage component.

values
ComponentInstance<AvatarImageProps, AvatarImageState, AvatarImageExposes>

AvatarGroup#

Props#

Defines valid properties in AvatarGroup 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?: AvatarGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AvatarGroupInstance) => 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<AvatarGroupPassThrough>	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: AvatarGroupInstance) => 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 AvatarGroup component.

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

Types#

Instance

Instance of AvatarGroup component.

values
ComponentInstance<AvatarGroupProps, AvatarGroupState, AvatarGroupExposes>

useAvatar#

Props#

Defines valid properties in useAvatar.

name	type	default	description
delayDuration	number	null	The delay duration of the avatar.

State#

Defines valid state in useAvatar.

name	type	default	description
load	boolean	null	Whether the avatar's image is loading or not.

Exposes#

Defines the methods and properties exposed by useAvatar.

name	type	default	description
state	useAvatarState	null	The state of the useAvatar.
handleImageLoad	(src?: string) => void	null	The method to handle image load.
handleImageUnload	() => void	null	The method to handle image unload.

Events#

Types#

Instance

Instance of useAvatar headless.

values
HeadlessInstance<useAvatarProps, useAvatarState, useAvatarExposes>