Components Avatars

Avatars

Round portrait for a user, partner, or organisation. Image served by the avatar API with a deterministic initials fallback so every avatar always renders — no broken squares, no missing alt text.

<koala-avatar>

Canonical

Medium size, deterministic initials fallback. The image is served by /api/avatars/{id} with a deterministic initials fallback so it always renders.

Variants

6 variants

Small

size="Small"

Medium

size="Medium"

Large

size="Large"

Photo

has-avatar="true"

Partner

koala-partner-avatar

Organisation

koala-organisation-avatar

States

3 states

Initials fallback

No uploaded image; deterministic initials

Photo

Avatar API returns the uploaded blob

Empty

No name or email; placeholder initials

Props

7 attributes

Attribute	Values	Notes
size	Small, Medium, Large	Defaults to `Small` (w-7). Medium is w-10, Large is w-20.
user-id	Guid	Selects the avatar endpoint at `/api/avatars/{id}`.
first-name / last-name	string	Used for the initials fallback and the `alt` attribute.
email	string	Fallback display name when first/last are missing.
avatar-version	string	Cache-busting key. Blob name when a real image is stored; initials key otherwise.
has-avatar	bool	Back-compat flag; only influences the cache key now.
href	URL	Wraps the image in an Alpine-AJAX anchor with `x-target.push="main"`.

Do & don't

JD Jane Doe

Do Pair the avatar with the person's name when space allows. The fallback initials encode the same identity, so the two never disagree.

Don't Don't square-corner the user avatar. Round corners signal a person; the squared variant is reserved for partner and organisation crests.