◇

Avatar

3 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  AvatarRoot,
  AvatarImage,
  AvatarFallback,
} from '@robonen/primitives/avatar';

<AvatarRoot>
  <AvatarImage />
  <AvatarFallback />
</AvatarRoot>

API Reference

AvatarRoot

Root

No props or events — renders its element and forwards attributes.

AvatarImage

Image

Prop	Type	Default	Description
`src`?	`string`	—	—
`alt`?	`string`	—	—
`onLoadingStatusChange`?	`(status: AvatarImageLoadingStatus) => void`	—	Optional hook to reject loaded images by their dimensions/src.

AvatarFallback

Fallback

Prop	Type	Default	Description
`delayMs`?	`number`	—	Delay in ms before rendering the fallback (avoids flicker on fast networks).