Avatar
User image or initials display with size, shape, status, and group variants.
Image Avatar
When a photo is available. Crops to fill the circle.
Initials Fallback
Deterministic colour palette from 8 named variants — assign by hashing user ID.
Sizes:
Icon Fallback
Use when neither photo nor name is known — anonymous or deleted users.
Square Shape
Better for brand logos, workspace icons, or bot avatars.
Status Dot
Overlay dot for presence indicators. Wrap the avatar in
.av-wrap so the dot sits outside the clipped circle.
Avatar Group
Stacked avatars for "members", "seen by", or collaborator lists.
Groups are flex-direction: row-reverse so left-most avatar
visually sits on top.
3 members
5 members, showing 4 + overflow
Large (lg)
Small (sm)
Real-world: Comment Thread
How avatar + name + status compose into a comment list.
Looks great — the filter chip behaviour matches what we discussed. Can we also show a count badge when a filter is active?
I think the selected state contrast is good. Maybe bump the border-radius to match the new button style?
Done. Used --radius-sm across the board as per the design token guide.
Real-world: Team Member List
Compact list combining avatar, name, status indicator, and role badge.
Andi Pratama
Siti Rahayu
Budi Santoso
Dewi Lestari
Rizki Wahyu