Avatar

Interactive

See Avatar in Storybook for every variant, with live controls.

A person or entity, as an image or as initials.

import { Avatar } from "@kairosis/eidos";

<Avatar name="Ada Lovelace" size={32} />
<Avatar name="Ada Lovelace" src="/ada.jpg" />;

Props

Prop	Type	Default	Description
`name`	`string`	`""`	Drives the initials and the colour
`src`	`string`	—	Image URL; falls back to initials when absent
`size`	`number`	`28`	Diameter, px

Without src, it renders up to two initials — "Ada Lovelace" → "AL".
The background colour is a stable hash of name, from the same 8-colour tag palette, so a person keeps their colour across sessions. It is decorative and carries no meaning.
Initials scale with the circle (38% of the diameter), so any size stays balanced.
Always pass name, even with src — it's the image's alt text and the title.