Prototype Library

Avatar

Compact identity marker. Falls back image → initials → user icon, with a deterministic background hue derived from the name.

Inherited .astro import EsaAvatar from '@esa/ecology/esa-avatar.astro';

Preview

AL 
<Avatar name="Ada Lovelace" />

Sizes

AL AL AL AL 
<Avatar name="Ada Lovelace" size="xs" />
<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Ada Lovelace" size="md" />
<Avatar name="Ada Lovelace" size="lg" />

Shapes

GH GH 
<Avatar name="Grace Hopper" shape="circle" />
<Avatar name="Grace Hopper" shape="square" />

Fallbacks

The background hue is hashed from name, so each person gets a stable, distinct color. Resolution order is image → initials → user icon.

Photo User AT KJ S 
<Avatar src="https://i.pravatar.cc/100?img=12" name="Photo User" />
<Avatar name="Alan Turing" />
<Avatar name="Single" />
<Avatar />

API

PropTypeDefaultDescription
name string '' Used to derive initials and a deterministic background hue.
src string '' Image URL. When set, renders the photo instead of initials.
icon string '' Lucide icon name for an icon fallback (defaults to a user glyph).
size 'xs' | 'sm' | 'md' | 'lg' 'md' Avatar diameter (20 / 28 / 40 / 56px).
shape 'circle' | 'square' 'circle' Fully rounded or rounded-square.
initials string — Explicit initials, overriding the first+last derivation from name. For callers that carry their own rule — esa-header-nav takes the first letter of every word capped at two, so "Mary Jane Watson" is MJ there and MW by default here.

Accessibility

  • Image fallback uses name (or "Avatar") as its alt text.
  • The icon fallback is aria-hidden — pair the avatar with a visible name nearby for screen readers.
  • Content is non-selectable (user-select: none) so initials don't interfere with text selection.