Avatars - Koala Design

User avatar sizes

Three sizes: Small (28px), Medium (40px), and Large (80px). When no avatar image is available, initials are shown as a fallback.

SJ Small

SJ Medium

SJ Large

<!-- Small -->
<koala-avatar size="Small"
              user-id="@user.Id"
              first-name="Sarah"
              last-name="Johnson"
              has-avatar="false" />

<!-- Medium -->
<koala-avatar size="Medium"
              user-id="@user.Id"
              first-name="Sarah"
              last-name="Johnson"
              has-avatar="false" />

<!-- Large -->
<koala-avatar size="Large"
              user-id="@user.Id"
              first-name="Sarah"
              last-name="Johnson"
              has-avatar="false" />

User avatar with image

When has-avatar="true", an <img> is rendered pointing to /api/avatars/{id}. The initials span is hidden but present as a fallback.

Small

Medium

Large

<koala-avatar size="Medium"
              user-id="@user.Id"
              first-name="Sarah"
              last-name="Johnson"
              has-avatar="true" />

Partner avatar

Partner avatars use <koala-partner-avatar> and show a single initial from the partner name. Same sizes as user avatars.

G Small

G Medium

G Large

<!-- Small -->
<koala-partner-avatar size="Small"
                      partner-id="@partner.Id"
                      name="Greenfield Solicitors"
                      has-avatar="false" />

<!-- Medium -->
<koala-partner-avatar size="Medium"
                      partner-id="@partner.Id"
                      name="Greenfield Solicitors"
                      has-avatar="false" />

<!-- Large -->
<koala-partner-avatar size="Large"
                      partner-id="@partner.Id"
                      name="Greenfield Solicitors"
                      has-avatar="false" />

Organisation avatar

Organisation avatars use <koala-organisation-avatar> and show initials from the organisation name (first letter of first and last words). Uses font-semibold and uppercase. Falls back to a building icon when no name is provided.

KL Small

KL Medium

KL Large

No name

<koala-organisation-avatar size="Small"
                          organisation-id="@org.Id"
                          name="Koala Legal"
                          has-avatar="false" />

<koala-organisation-avatar size="Medium"
                          organisation-id="@org.Id"
                          name="Koala Legal"
                          has-avatar="true" />

User avatar attributes

Attributes for <koala-avatar>.

Attribute	Type	Description
size	AvatarSize	Small (w-7 / text-xs), Medium (w-10 / text-sm), Large (w-20 / text-2xl)
user-id	Guid	User ID used for `/api/avatars/{id}` URL
first-name	string	First character used for initials
last-name	string	First character used for initials
has-avatar	bool	Whether to render the <img> element. When false, only the initials span is shown.

Partner avatar attributes

Attributes for <koala-partner-avatar>.

Attribute	Type	Description
size	AvatarSize	Small (w-7 / text-xs), Medium (w-10 / text-sm), Large (w-20 / text-2xl)
partner-id	Guid	Partner ID used for `/api/partner-avatars/{id}` URL
name	string	Partner name. First character used for the single initial.
has-avatar	bool	Whether to render the <img> element. When false, only the initial span is shown.

Organisation avatar attributes

Attributes for <koala-organisation-avatar>.

Attribute	Type	Description
size	AvatarSize	Small (w-7 / text-xs), Medium (w-10 / text-sm), Large (w-20 / text-2xl)
organisation-id	Guid	Organisation ID used for `/api/avatars/organisations/{id}` URL
name	string	Organisation name. Initials from first letter of first and last words.
has-avatar	bool	Whether to render the <img> element. Falls back to initials or building icon.

Size reference

CSS classes applied by each size.

Size	Dimensions	Text size	Pixels
Small	w-7 h-7	text-xs	28 x 28
Medium	w-10 h-10	text-sm	40 x 40
Large	w-20 h-20	text-2xl	80 x 80

"You" indicator

Use koala-you="@user.Id" next to an avatar and name to show "(you)" when the user ID matches the authenticated user. Suppresses output for other users.

SJ Sarah Johnson (you)

JW James Williams

<!-- Shows "(you)" for the authenticated user, nothing for others -->
<span koala-you="@user.Id"></span>

<!-- With extra classes -->
<span koala-you="@user.Id" class="shrink-0"></span>

<!-- In <option> elements (tag helper can't be used), use inline: -->
@(user.Id == (Guid?)ViewData["UserId"] ? " (You)" : "")