Avatar
A person's photo, or their initials when there is no photo. Use it next to names in comments, lists and profiles, so people recognize each other faster.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the client, because it waits for the photo to load.
import { Avatar, AvatarGroup } from "@camaleo/react";Anatomy
A round box that holds the photo, or the fallback while the photo loads or when it fails. AvatarGroup overlaps several of them.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
With a photo
On its own, the avatar must say who it is. Put the person's name in alt, never "photo" or "avatar".
Next to the name
When the name is right beside it, hide the avatar with aria-hidden. Otherwise screen readers say the name twice.
- Camila Prado
sm· comments and dense lists - Eduardo Ramos
md· the default, for menus and cards - Lucas Ferreira
lg· profile headers
Sizes
Small for comments and dense lists, medium for menus and cards, large for the top of a profile. Keep one size per list.
Initials and icon
Without a photo, two initials still tell people apart. Use the icon for guests and accounts without a name. alt names the avatar whether the photo or the fallback is showing, so screen readers hear the name, not the initials.
Photo that fails
If the photo doesn't load, the initials stay in place. Always pass a fallback, so a broken link never leaves an empty circle.
Group with a count
Show a few faces and a "+3" for the rest. Name the group with the total, like "7 people on…", and give "+3" its own name.
Presence
Click the button. The status is a word in a badge, not just a green dot, and a status region reads the change aloud.
In context
Avatars put a face next to what people did. These are whole pieces of UI you can copy, in the skin you picked.
I checked the new invoice layout on a phone. The totals no longer wrap, nice work!
Lucas Ferreira
Product designerLeads the checkout flow and runs the monthly usability sessions.
fix/invoice-roundingGuidelines
With the name next to it, the avatar is decoration: hide it from screen readers.
Screen readers hear "Photo of Mariana Lima, Mariana Lima". The repeat adds nothing.
First and last name initials tell people apart, even without a photo.
"?" looks like an error and says nothing about who it is.
Props
role="img" and aria-label, or hide it with aria-hidden when the name is next to it.sm for comments and dense lists, md for menus and cards, lg for profile headers.Other attributes, like role, aria-label and aria-hidden, go to the outer <span>. AvatarGroup renders a <div role="group"> and needs an aria-label.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the avatar itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- With alt, the avatar is one image named after the person (role="img"), with the photo or the initials. Next to a visible name, leave alt empty so the name isn't read twice.
- Next to a visible name, hide the avatar with aria-hidden="true", so the name isn't read twice.
- Name an AvatarGroup with the total ("7 people on the project"), and give the "+3" avatar a name too ("and 3 more").
- Presence needs a word, not only a colored dot. People who don't see the color still need to know who is online.