KKoyo UI
Koyo catalog

Koyo Avatar

DraftKoyo-owned

Koyo Avatar documents profile imagery, initials, groups, presence, and fallback treatments.

Variants
Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.
ImageFallback initialsGroupPresenceVerifiedCompact
Token Notes
Token decisions that should stay visible while the catalog is migrated.
  • Figma Avatar variants include Picture On/Off, Small, Regular, Tiny, Extra Tiny, Roundrect, and Round.
  • Avatar Stack includes Regular and Small sizes with visibility booleans for additional stacked items.
  • Fallback surfaces should use muted tokens and maintain readable foreground contrast.
  • Presence and verification marks should be documented as Koyo-owned compositions, not base primitives.
Code Targets
Files the docs entry points at today, ready for later catalog linking.
  • Source

    Avatar source

    src/components/ui/avatar.tsx
  • Docs

    Koyo detail route

    src/app/(pages)/docs/koyo/[component]/page.tsx
Figma Mapping
Base/store nodes are reference only. The Koyo component is the docs and implementation target.
Page
Avatar (842:44440)
Base/store reference
First Avatar frame (273:27988), component sets Avatar (18:1398) and Avatar Stack (22:9509)
Koyo-owned target
Second Avatar frame (3455:12614), component sets Avatar (3455:12621) and Avatar Stack (3455:12700)
Confidence
high
PreviousKoyo Accordion