Avatar

Example (a11y tier)

The first is beside a visible name, so it is decorative. The rest stand alone, so each carries the person's name.

Import

import Avatar from 'abaabil/avatar'         // structure only

import Avatar from 'abaabil/avatar/styled'  // + CSS

import Avatar from 'abaabil/avatar/a11y'    // + decorative vs meaningful

The question the component cannot answer for you

Whether an avatar carries information or repeats it changes per use, which is why this is a prop and not a guess.

Beside a visible name it is decorative. It says nothing the text does not, and naming it means hearing the person twice: “Fatima Ahmed, image, Fatima Ahmed”. That is the default.

Alone it is not. In a stack of collaborators or a comment with no byline, the avatar is the only thing identifying someone, so it needs a name. Pass decorative={false}.

The initials are never the name

“FA” read aloud is not a person. When the avatar is meaningful the letters are hidden and the accessible name is the full name, carried by a role="img" that can actually hold one. On a bare <span> an aria-label would be discarded, which is the same trap the badge page describes.

Initials take the first letter of the first and last word, not the first two letters of the string: that turns “Ali” into “AL”, which is not a person's initials. Where the browser supports it the split uses Intl.Segmenter, so a name beginning with an emoji or an astral-plane letter is not cut in half.

No fallback on a broken image

Detecting a failed load needs an onError handler and state, which would make every tier a client component for a case the server usually already knows about. Pass no src and you get initials; decide which you have before rendering.