Avatar

A person or an organisation, as a photo or as their initials.

import { Avatar } from '@zitdevs/ui';

Examples

Sizes

24, 32, 40, 56 and 80px. Without a photo, the initials of the first two words of the name.

IMIMIMIMIM

<Avatar name="Isaac Martínez" size="lg" />
<Avatar name="Isaac Martínez" src="/team/isaac.jpg" />

Status

The dot is drawn in the status roles, and the status is said in words, off screen.

APOnlineJGBusyLDOfflineAPEn línea

import * as es from '@zitdevs/ui/labels/es';

<Avatar name="Ana Pérez" status="online" labels={es.avatar} />;

An organisation

square for a client or a company rather than a person.

BCAL

Props

Prop	Type	Default	Notes
name	string	required	The photo’s alt, the initials’ source and the accessible name.
src	string	—	The photo. Without one, the initials.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	24, 32, 40, 56 or 80px.
square	boolean	false	Square corners, for an organisation.
status	'online' | 'busy' | 'offline'	—	A dot, and the status in words, off screen.
labels	Partial<AvatarLabels>	English	{ online, busy, offline }. es.avatar from labels/es.
ref	Ref<HTMLSpanElement>	—	The root <span>.
className	string	—	Placement.
anything else	<span> attributes	—	On the root, such as aria-hidden when the name is printed beside it.

Exported types: AvatarProps, AvatarSize, AvatarStatus, AvatarLabels, and the label sets avatarLabels.

Accessibility

• The name is what is read: the photo’s alt, or the name of the initials’ tile (role="img"), whose letters are hidden.
• The status is said in words (“Online”, “En línea”) as well as drawn, since a dot’s colour alone says nothing to a reader who cannot see it.
• When the name is printed beside the avatar, as in a list of people, pass aria-hidden so the name is not read twice.
• The initials reach 7.9:1 on their tile.

Without JavaScript

An image or a tile of letters: it needs none, and renders as a Server Component. A photo that fails to load shows its alt; to fall back to initials instead, omit src when you know the photo is missing.

Theming

primary-soft-active and primary-active (the initials’ tile), surface-active (behind a photo), success, danger and border-strong (the status dot), surface-raised (the dot’s ring).