Avatar List Item
A flexible row component that pairs an avatar with a title and optional secondary content. Use it in lists of participants, sponsors, activity feeds, or onboarding steps — anywhere a person or entity needs to be represented inline.
Recent ActivityView All →
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Primary label — person's name, entity name, or step title. |
subtitle | string | — | Secondary line below the title. Omit to hide. |
avatarType | 'icon' | 'initials' | 'image' | 'icon' | Controls the avatar visual. Use consistently across a list. |
avatarColor | string | var(--color-sand-2) | Avatar background colour. Pass the same value to all items in a list. |
initials | string | — | Required when avatarType is 'initials'. 1–2 characters. |
avatarSrc | string | — | Image URL. Required when avatarType is 'image'. |
variant | 'supporting' | 'badge' | 'nav' | 'supporting' | Controls the right-side slot. Use consistently across a list. |
supportingText | string | — | Right-side text for the supporting variant. Omit to hide the slot. |
badgeLabel | string | 'Badge' | Label for the badge variant. |
badgeIntent | BadgeIntent | 'positive' | Intent colour for the badge. |
badgeIcon | BadgeIcon | — | Optional icon on the badge. |
interactive | boolean | true | When false, renders a non-clickable <div> with no hover state. |
onClick | () => void | — | Click handler. Only fires when interactive is true. |
usage
Avatar List Items are designed to live in a list together. Keep the avatar type, avatar colour, and variant consistent across all items in the same list. When stacked, use gap: var(--spacing-between-options) — each item already carries its own vertical padding.
When to use
- Lists of participants, attendees, or members
- Sponsor or partner rosters
- Activity feeds showing who did what
- Onboarding step lists where each step has an owner or status
Do not use
- In menus or menu overlays — a dedicated menu component handles that use case
- With mixed variants in the same list — don't combine badge and supporting text variants
- With mixed avatar types in the same list — pick one and keep it consistent
- With long text — content should be short and scannable
DoKeep variant and avatar style consistent across all items
Don’tMix avatar colours or variants within the same list
variants
Supporting textMetadata on the right — timestamps, prices, or any short label.
BadgeA status badge on the right — ideal for roles, tiers, or states.
NavA caret on the right signals the item navigates to another screen.
avatar types
Three avatar types are available. Choose one and use it consistently across all items in the same list. The avatar colour is controlled separately — pass the same avatarColor value to every item.
IconGeneric person icon. Use when individual photos or initials aren't available.
InitialsShows 1–2 initials. Good when names are known but photos aren't available.
ImageReal photo. Use when profile images are reliably available for all list items.