Avatar (+ Avatar Group)
User/driver identity chip — initials fallback or image, with an optional live status
dot. AvatarGroup composes several into an overlapping stack ("Team Online", driver
dispatch cells).
Selectors: tip-avatar, tip-avatar-group
API — tip-avatar
| Name | Type | Default | Description |
|---|---|---|---|
name (input) |
string |
'' |
Source for initials (first letter of up to first 2 words, uppercased). |
src (input) |
string | undefined |
undefined |
Image URL; when set, renders as background-image instead of initials. |
size (input) |
Size = 'sm' | 'md' | 'lg' |
'md' |
Pixel size: 24 / 32 / 40. |
status (input) |
AvatarStatus | undefined = 'online' | 'busy' | 'away' |
undefined |
Renders a bottom-right status dot (emerald/red/gold) when set. |
API — tip-avatar-group
| Name | Type | Default | Description |
|---|---|---|---|
names (input) |
string[] |
[] |
Plain name strings (not a richer people-object array) — one avatar each. |
max (input) |
number |
5 |
Max avatars shown before collapsing the remainder into a +N chip. |
size (input) |
Size |
'md' |
Forwarded to every child tip-avatar. |
Usage
<tip-avatar [name]="driverName()" status="online" size="lg" />
<tip-avatar-group [names]="teamOnline" [max]="4" size="sm" />
Notes
- Overlap amount is
-(px * 0.32); the+Nextra chip uses--tip-ink-900/white text, same overlap. - Status dot border is
2px solid var(--surface-card)so it "punches through" the avatar edge regardless of background. - No image-load-error fallback — if
src404s, the disc renders blank (no initials fallback kicks in automatically); passsrconly when you're confident it resolves.