Component
Avatar & AvatarStack
Circular photo with letter-fallback. Stacks overlap with an optional +N tail for mutuals.
9:41
Maya R.
Single avatar (with ring) + AvatarStack
Props (Avatar)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Photo URL. Letter fallback shown when omitted. |
| alt | string | — | Required when src is set. |
| fallback | string | — | Letters shown when no photo (e.g. initials). |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 24 / 32 / 40 / 56 / 80 px. |
| ring | boolean | — | Adds a brand-colored ring (used for hero / active states). |
Props (AvatarStack)
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | Array<{ src?, alt?, fallback? }> | — | Ordered list of avatars to stack. |
| max | number | 4 | Avatars beyond this collapse to a +N tile. |
| tail | string | — | Trailing label, e.g. '4 mutual friends'. |