GrAvatar

The fallback order: src → fallbackSrc → initials from name → the default slot.

<GrAvatar src="https://cdn.example/u/42.png" fallback-src="/avatar.svg" name="Ada Lovelace" />

A broken link is handled: on @error the component moves to the next option, and the browser does not draw the broken-image icon. Changing src resets the error — a new link does not inherit the fate of the previous one.

While the picture is on its way, its place is held by a skeleton: otherwise a row of avatars flickers with empty circles.

name provides the initials (the first letters of the first two words) and the accessible name. When there is a picture, the name serves as its alt; without a picture the avatar itself takes the img role and the name — otherwise a circle with initials is empty for a screen reader. alt beats name, the slot beats the initials.

The initials function is available separately: import { initialsFrom } from '@feugene/granularity'.

The type size is computed from the diameter — a third of it, but no less than 10px. The size of an avatar can be an arbitrary number of pixels, so a map across the steps of the scale does not cover it. The rule is one for the initials, the slot text and the “+N” counter of GrAvatarGroup: they stand in the same row, and different proportions would read as a defect.

autoColor colours the background by the name: the same name always gives the same colour, so a person in a list can be recognised by the patch before the initials are read.

It is off by default and is switched on for the whole application through GrConfigProvider:

<GrConfigProvider :component-defaults="{ GrAvatar: { autoColor: true } }">

A grey avatar is a deliberate neutral default: a coloured circle argues with the design where an avatar stands inside a dense interface. Switching it on therefore remains a decision of the application rather than of the library.

There is no palette inside the component. The six slots (--gr-avatar-1-bg/-fg … -6-) are declared in the theme of the component itself (components/GrAvatar/themes/), and each by default refers to the -light/-text pair of a ready tone — the same one the soft variant of GrBadge stands on. The component computes only the number of the slot.

The palette deliberately does not go into the global theme: one component needs it, and there it would be paid for by whoever does not take GrAvatar as well. The palette has no dark file — a slot refers to a role, and the role switches together with the theme on its own.

An application that has no need of a pale red or a pale green avatar only has to override the slot:

:root { --gr-avatar-4-bg: var(--gr-slate-light); --gr-avatar-4-fg: var(--gr-slate-text); }

Three of the six tones are semantic, and that is a choice rather than an oversight: the tones are pale, and in a row of people colour reads as identity rather than as a state. The override above exists precisely for those who disagree.

The colour is visible only under the initials: a picture covers the background entirely, and an empty avatar has nothing to colour. The “+N” counter of GrAvatarGroup stays neutral as well — it is not a participant, it has no name.

The contrast of a pair and the distinguishability of the slots are held by the src/__tests__/avatarPalette.test.ts gate — in both themes at once.

<GrAvatar name="Ada Lovelace" status="online" />

online | offline | busy | away. The dot is decorative (aria-hidden), and the status is announced with a word from the locale (gr.avatar.status.*): colour on its own carries no meaning.

<GrAvatarGroup :max="3" :total="9" aria-label="Release team">
  <GrAvatar v-for="member in team" :key="member.id" :name="member.name" />
</GrAvatarGroup>

max limits the number of visible avatars, the remainder collapses into “+N”; total is needed when the slot holds only part of the participants. The group is declared role="group", and its name contains both the label and the number hidden — a screen reader says “Release team, and 6 more” rather than a set of nameless pictures.

The size and shape of the group reach the children through context, so the row does not fall apart.

size accepts a step of the scale (xs…lg, read from GrConfigProvider) or a number of pixels — an avatar has historically had an arbitrary diameter. shape (circle | square) is likewise configured globally through componentDefaults.GrAvatar.shape.