Display

Avatar

User avatar with image, initials fallback, and status indicator. Group avatars with LlmAvatarGroup.

LlmAvatar + LlmAvatarGroup

Demo

Group with overflow

<LlmAvatar name="Jane Doe" size="md" status="online" />
<LlmAvatar name="John Smith" size="lg" shape="square" />
<LlmAvatarGroup max={3} size="md">
  <LlmAvatar name="Alice" />
  <LlmAvatar name="Bob" />
  <LlmAvatar name="Carol" />
  <LlmAvatar name="Dave" />
</LlmAvatarGroup>

API

Prop	Type	Default	Description
`src`	`string`	`''`	Image URL
`alt`	`string`	`''`	Alt text for the avatar image
`name`	`string`	`''`	Used for initials fallback and aria-label
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the avatar
`shape`	`'circle' \| 'square'`	`'circle'`	Shape of the avatar
`status`	`'online' \| 'offline' \| 'away' \| 'busy' \| ''`	`''`	Status dot indicator

Import

import { LlmAvatar, LlmAvatarGroup } from '@atelier-ui/react';