Avatar

Data display · src/components/Avatar/Avatar.tsx

Stands in for a person: their picture, a generated mark, or their initials.

At xs and sm it always falls back to initials even when a mark is available - the mark needs about 40px to read as a mark rather than a smudge, and a smudge carries less than two letters do.

The name is rendered into a visually-hidden span whenever there is no image, so the avatar has an accessible name even though the visible content is two letters or a drawing. A title alone would not do it: title is a tooltip, not a name.

Import

import { Avatar } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
name	string	The person's name. Becomes the image's alt, the title, and the initials fallback.
src	string
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'
shape	'circle' | 'square'
color	string	Background when there is no picture and no generated mark.
art	boolean	false forces initials instead of a generated mark.
seed	string | number	Hash input for the generated mark, so it survives a name change.
family	(typeof MARK_FAMILIES)[number]
status	'online' | 'away' | 'busy' | 'offline'	A dot on the corner.
className	string