# Avatar

Initials in a round tile for staff and customers (no photos of real people). 28px in lists and the top bar, 44px in a record header.

- **Group:** Small primitives · **family:** `base` · **shadcn:** Avatar
- **Build:** shadcn `Avatar` (Radix Avatar) with `AvatarFallback` only.
- **In apps/admin today:** Not in apps/admin/ui.
- **Client component:** no. 

## Content rules

- Two initials, uppercase.

## Do

- Use initials only.

## Don't

- Real customer photos.
- Colour-code people.

## Accessibility

- **ARIA:** Decorative next to a visible name (`aria-hidden`); alone, `aria-label` with the name.
- **Keyboard:** Not focusable unless it is the account button.
- **Focus:** Account button: ring as icon button.

## Tokens

`--r-pill` `--accent` `--accent-foreground` `--w-semibold` `--text-11` `--font-voice` `--text-card`

## Files

`avatar.html` live specimen · `avatar.css` kit rules · `avatar.d.ts` props · full page: `docs/components/avatar/` (phone: `m/`).