Display
Avatar
User avatar with image, initials fallback, and status indicator. Group avatars with LlmAvatarGroup.
LlmAvatar + LlmAvatarGroupDemo
Live PreviewReact
Group with overflow
+2
jsx
<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 (Angular)
| 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 |
Composition parts
Avatar is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmAvatarGroup
Stacks multiple LlmAvatar children with a "+N" overflow indicator. Pass size once on the group and it applies to every child.
| Prop | Type | Default | Description |
|---|---|---|---|
max | number | — | Maximum number of avatars to show. Remaining children are summarized as "+N". |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Applied to every child avatar — overrides their individual size. |
Import
ts
import { LlmAvatar, LlmAvatarGroup } from '@atelier-ui/angular';