Avatar

Preview

<Avatar name="Ada Lovelace" />

Sizes

<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

<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.

AT KJ S

Show code Copy

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

API

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.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.