Avatar

A compact, circular identity marker that shows a person's photo or their initials, with an optional presence dot.

When to use

• Next to a name in lists, comments, bylines and table rows so people can be recognised at a glance.
• To show online/offline presence for a single person.
• Use AvatarGroup when several people share one slot (reviewers, watchers).
• Use EntityChip when the reference sits inside running text and needs the name beside it.

Usage

import { Avatar } from "@/components/iris/avatar/avatar";

h(Avatar, { name: "Katerina Vlachou", size: "md", status: "online" });
h(Avatar, { name: "Stelios Antoniou", src: member.photoUrl, size: "lg" });

Props

Prop	Type	Default	Description
name	string	— (required)	Full name. The first letters of the first two words become the initials, and it forms the accessible label.
src	string	—	Photo URL. Initials show while it is missing or if it fails to load.
size	"sm" | "md" | "lg" | "xl"	"md"	28 / 36 / 48 / 88 px.
status	"online" | "offline"	—	Presence dot in the corner; also appended to the accessible label.
...props	HTMLAttributes<HTMLSpanElement>	—	Spread onto the root span (e.g. className, title).

Notes

• Rendered as role="img" with aria-label "Name" or "Name, online"; the initials are aria-hidden.
• A photo that is still downloading fades in from a soft blur; cached photos show at once. The presence dot springs in and out, and both are instant under prefers-reduced-motion.
• Reads --line, --hover, --ink, --surface, --green, --ink-3, --text-xs.
• Photos render through ProvidedImage, so inside an IrisProvider they use the app's image component (such as next/image); without one they are a plain <img>.