Avatar

An avatar stands in for a person or an entity: the picture when there is one, initials when there is not, in the smallest representation the framework has. It is content rather than a label, a Badge describes something else, a Chip is a value the reader acts on, and an avatar is the thing, which is why it is the only one of the three that carries an identity.

Two decisions make it more than an image. The initials are derived from the name by one shared rule, so the same entity looks the same on every surface; and the avatar carries a single accessible name, so the picture and the initials are not read out as two different subjects.

Usage

import { Avatar } from "@asheeui/web";

<Avatar name="Priya Raman" src="/people/priya.png" />

name is the identity and, unless alt overrides it, the name assistive technology reads. src is optional: without it, or when it fails to load, the avatar shows its fallback instead.

Sizes and shape

Three diameters, 2rem, 2.5rem and 3rem at sm, md and lg, and the font size of the initials steps with them. The registered radius is full, which is what makes a person round; a smaller radius turns the same frame into a square tile, and the picture is clipped to whichever it is.

color does not tint the picture: it colours the surface the initials fall back to, so an avatar with an image is the image and an avatar without one is an accent in the theme's own role.

When there is no picture

The fallback is the point of the component. When src is absent, or when the image fails to load, the avatar renders initials derived from name: a single word contributes its first two characters, and a longer name the first letters of its first and last word, upper-cased.

fallback replaces the initials entirely, which is what an entity without a name wants, an unassigned slot, a deleted account, a team glyph. A picture that fails after it started loading swaps to the same fallback, so a broken source is never an empty circle.

Props

size and radius are registered by the component as md and full, and color is not, so the initials resolve from the application's defaultColor and then primary. radius being registered is why an avatar is a circle in a product whose defaultRadius is xs: the application's radius never reaches it unless components.avatar.radius or the instance states one.

name, src, alt, fallback, component and componentProps are instance-only, because they are the identity being shown rather than the design showing it.

component and componentProps are handed to the framework's Image, so a framework's own image component, the intrinsic size, the loader, the allowed host, keeps working inside the avatar. That is the framework's shared seam rather than an avatar feature: see links and substitution.

Accessibility

• The frame is role="img" with one aria-label, taken from alt and then from name, so a picture avatar and an initials avatar are both read as a single name.
• With neither alt nor name the avatar is aria-hidden: decoration beside text that already names the entity, which is exactly what a row of initials next to a name is.
• The picture inside carries an empty alt on purpose, so the name is not read twice, once by the frame and once by the image in it.
• The avatar is not interactive: no tab stop, no press, no state. A row of avatars that opens something needs a link or a button around it.

Related