Display / Avatar
Avatar
Doodle faces generated from a name, so the same person always gets the same face. Real photos can drop in too.
Server ComponentWCAG AASince v0.1
import { Avatar, AvatarStack } from "@plop-ui/react";
<Avatar name="Jun Reyes" status="online" />
<Avatar name="Ana Cruz" status="busy" statusLabel="on a call" />
<AvatarStack names={crew} max={3} />Change every prop live in the playground.
Props
Avatar
| Prop | Type | Default | What it does |
|---|---|---|---|
| name required | string | — | The person's name. Picks their doodle face and becomes the accessible name. |
| className | string | none | — |
| size | "sm" | "md" | "lg" | "xl" | md | Face size: sm 36px, md 52px, lg 76px, xl 86px. |
| src | string | none | A photo URL; replaces the doodle. |
| status | "online" | "busy" | "offline" | none | A status dot. Its meaning is added to the accessible name ("Jun Reyes, online"). |
| statusLabel | string | online / busy / offline | Words for the status, e.g. "on a call". |
| tilt | number | 0 | Rotation in degrees. |
AvatarStack
| Prop | Type | Default | What it does |
|---|---|---|---|
| names required | string[] | — | Avatars to show (decorative inside the stack; the stack carries the name). |
| children | ReactNode | none | — |
| className | string | none | — |
| label | string | "Rosa, Jun, Ana and 4 more" | Accessible name. |
| max | number | 3 | How many faces to show before "+N". |
Use it well
DoPass the person's real name, so the face and the accessible name match.
Don'tRely on the status dot alone. Its meaning is part of the name for a reason.
Accessibility
- role="img" named after the person; the status joins the name ("Jun Reyes, online").
- Stacks are named "Rosa, Jun, Ana and 4 more".