Avatar · ui.voila.dev

CDCDCD

CDNGML

<Avatar.Root>
	<Avatar.Image src={user.avatarUrl} alt={user.name} />
	<Avatar.Fallback>CD</Avatar.Fallback>
</Avatar.Root>

The fallback shows while the image loads and stays if it fails, so always give one. Avatar.Group overlaps a row of them and Avatar.GroupCount closes it with an overflow count.

For a name and a role next to the picture, UserAvatar does that in one component.

API

Avatar.Root

Prop	Type	Default
`size`	`"default" \| "lg" \| "sm"`	`"default"`
`className`	`string` \| `((state: AvatarRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, AvatarRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: AvatarRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: avatar/components/avatar-root.tsx.

Avatar.Badge

Prop	Type	Default
`status`	`"busy" \| "offline" \| "online"`	—	Presence dot: `online` reads success, `busy` destructive, `offline` muted. Colour is the only difference between them, so give the badge a label or `title` — a screen reader gets nothing from the hue.

Plus every <span> prop. Source: avatar/components/avatar-badge.tsx.

Avatar.Fallback

Prop	Type	Default
`className`	`string` \| `((state: AvatarFallbackState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`delay`	`number`	—	How long to wait before showing the fallback. Specified in milliseconds.
`render`	`ComponentRenderFn<HTMLProps, AvatarFallbackState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: AvatarFallbackState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: avatar/components/avatar-fallback.tsx.

Avatar.Group

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: avatar/components/avatar-group.tsx.

Avatar.GroupCount

Prop	Type	Default
`size`	`"default" \| "lg" \| "sm"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: avatar/components/avatar-group-count.tsx.

Avatar.Image

Prop	Type	Default
`className`	`string` \| `((state: AvatarImageState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`onLoadingStatusChange`	`((status: ImageLoadingStatus) => void)`	—	Callback fired when the loading status changes.
`render`	`ComponentRenderFn<HTMLProps, AvatarImageState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: AvatarImageState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: avatar/components/avatar-image.tsx.