Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesDisplayAvatar

Avatar

Round portrait for a user, partner or organisation. Names use deterministic initials; unidentified numbers use a person glyph.

<koala-avatar>

Size

Jane Doe Jane Doe Jane Doe

States

Initials fallback
John Doe
Unlinked identity
SC
Unknown number
Photo
Jane Doe
Empty

Person

Name and face
Jane DoeJane Doe
Muted, for a quiet column
Jane DoeJane Doe
Linked to a profile
Jane DoeJane Doe
Avatar only (name to screen readers)
Jane DoeJane Doe

Partner avatar

Koala Partners Koala Partners Koala Partners

Organisation avatar

Acme Conveyancing Acme Conveyancing Acme Conveyancing

Avatar stack

Haris RazaSabaa Hussain Haris RazaSabaa HussainSteve CheshireAndrew Gunn+1 Haris RazaSabaa Hussain+3

API

size SmallMediumLarge
user-id Guid
first-name string
last-name string
email string
name string (local initials or person glyph when no user exists)
has-avatar bool
avatar-version string
href URL (wraps in an anchor)
partner-id Guid (koala-partner-avatar)
organisation-id Guid (koala-organisation-avatar)
name string (koala-partner-avatar / koala-organisation-avatar)
show-tooltip bool (koala-partner-avatar)
people IReadOnlyList<AvatarStackPerson> (koala-avatar-stack)
ring SurfaceSurfaceContainerSurfaceContainerLow (koala-avatar-stack)
max int, 0 = all (koala-avatar-stack)