Avatar
Built on Base UI AvatarPrimitive. Used in AccountMenu (dashboard shell) for the Google-sourced profile photo, with initials/icon fallback when the image is missing or fails to load.
Sizes
Three sizes — sm (24px), default (32px), lg (40px).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Avatar diameter |
| className | string | — | Additional CSS classes to merge |
Image with fallback
AvatarImage renders first; AvatarFallback (initials or an icon) shows automatically if the image is absent or fails to load — never a broken-image icon.
Avatar Group
Overlapping stack for showing multiple participants, with a "+N" overflow count.
Status badge
Small indicator dot anchored to the bottom-right corner — reserved for a real status signal (e.g. online), not decoration.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn