Avatar

User or entity image with fallback.

Examples

import { Avatar } from '@var-ui/react';

<Avatar name="Ada Lovelace" status="success" />

Built on React Aria Components where applicable.

Prop	Type	Default	Description
`alt`	`string \| undefined`	—	Accessible description of the image.
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`name`	`string \| undefined`	—	Display name — initials fallback uses the first letter of the first two words.
`src`	`string \| undefined`	—	Image URL. When missing or on load error, initials are shown instead.
`status`	`AvatarStatusTone \| undefined`	—	Optional presence indicator shown on the avatar rim.

Theme this component via createDesignTheme({ components: { avatar: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core avatar().

Name	Example	Description
`class`	`var-ui-avatar`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-avatar__image`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-avatar__initials`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-avatar__status`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.