Avatars signal people — profile headers, member lists, and stacked groups. Pair Avatar with Row/Column layouts; use size tokens and status indicators instead of custom circles.
What this pattern covers
Identity UI shows up everywhere: settings profile cards, chat headers, team directories, and “who’s online” stacks. Once UI ships:
Avatar — photo, initials, or icon fallback with size tokens
AvatarGroup — overlapping stacks for “+3 collaborators”
User row — avatar + name + subtitle in one composition (describe in prose; gold block Settings1.tsx)
Gold references: packages/core/ai/examples/settings.tsx, packages/core/ai/examples/blocks/Settings1.tsx, and chat task bundle packages/core/ai/tasks/chat.json.
Avatar sizes
Avatar uses t-shirt sizes (xs through xl) — not pixel diameters.
Pass statusIndicator with green, yellow, red, or gray for presence dots — common in chat sidebars and team lists.Describe in prose: set statusIndicator={{ color: "green" }} on Avatar when the member is online. Keep one indicator per avatar; do not stack badges on top.
Use Row horizontal="between" when the action sits on the far edge. On mobile, stack with s={{ direction: "column", horizontal: "start" }}.
Avatar groups
AvatarGroup overlaps avatars for “shared with” or live presence:
Describe in prose: pass an avatars array of Avatar props. Cap visible faces (3–5) and show a +N overflow label in Text beside the group — the component handles overlap spacing.
Typical placement: under a project title, above a comment thread, or in a dashboard “team on this doc” strip.
Member list without ListItem
When Aveiro Learn cannot render List primitives, mirror list rows with Column + Row:
In your app, prefer List + ListItem with prefix={<Avatar … />} — same layout, less markup.
