'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Avatar
A person, as a photo or initials on a gradient, with status and groups.
Ant Design: Avatar
import { Avatar, AvatarGroup } from '@alea/ui';
Examples
Avatars
Initials on a gradient that stays the same for a name; a photo when there is one.
Group
The rest as +N.
Props
Avatar props
A person: photo, or initials on a gradient.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | The person's name: alt text and initials. |
shape | "circle" | "square" | 'circle' | circle (default) or square. |
size | "sm" | "md" | "lg" | "xs" | "xl" | 'md' | xs 24, sm 32, md 40 (default), lg 56, xl 80 px. |
src | string | - | Image URL. Falls back to initials when missing or broken. |
status | "online" | "away" | "busy" | "offline" | - | A status dot in the corner. |
AvatarGroup props
Overlapping avatars with a +N for the rest.
| Prop | Type | Default | Description |
|---|---|---|---|
peoplerequired | { name: string; src?: string | undefined; }[] | - | The people: name, and src for a photo. |
max | number | 4 | Shows this many, then +N. Default 4. |
size | "sm" | "md" | "lg" | "xs" | "xl" | 'md' | Size of every avatar. |
Accessibility
- Named by the person's name and status.
Do and don't
Do
- Always pass name: it gives the initials and the accessible name.
- Use AvatarGroup with max for long lists of people.
Don't
- Don't use an avatar alone to identify someone in a list: show the name too.
- Don't rely on the status dot's color alone.