On this page
Overview
Show code, PersonWithName.tsx
AvatarButton: an avatar as a button, with the name in a tooltip.
Show code, AccountButton.tsx
Variants
- Small
Compact text, such as a combobox option.
- Medium
Lists, comments and toolbars. The default.
- Large
A name with a second line, such as an account header.
- Extra large
A profile page. Not for AvatarButton.
Show code, Sizes.tsx
Pictures and fallbacks
Without a picture, or while it loads or after it fails, an avatar shows the initials of its name, or the default person picture, such as for a guest.
Show code, Fallbacks.tsx
Colors from the name
The name chooses one of eight pastel colors, the same on every page.
- An organization can take another of them as its own.
- Each is a soft fill with the initials or the figure in a deep shade of the same hue. In dark it turns over: a deep fill with light initials, so avatars stay quieter than the screen's text.
- In a dense place, a table's cell or a small group, the fills are quieter, so a column of avatars doesn't outweigh the data beside it.
- In a group, no two neighbours take colors that look alike.
- Initials stay large enough to read; an avatar smaller than the small size, such as one sized to a dense row, shows its color alone.
- The colors only tell people apart.
Anatomy
Spread, as under the pointer, and held level.
Group
Avatar
Initials
Person picture
Overflow
Show code, AvatarAnatomy.tsx
Behaviour
A group as a pile
AvatarGroup rests as a compact pile, like stacked cards, with the count of the rest in a circle.
- Hovering, tapping or focusing it spreads the avatars along a gentle arch, so each one shows.
- It keeps the room its spread takes, so nothing around it moves.
- A ring in the color of the surface below parts each avatar from the one it lies on, and the last from the count, which lies flat at the bottom.
Show code, ProjectMembers.tsx
Chosen
An avatar can show as chosen, such as in a list of people to pick from.
- A ring and a check, in the accent of a checked box, so the choice never rests on color alone.
- It is a look only: the control around it, such as a checkbox, says it is chosen.
Show code, ChooseReviewers.tsx
Pressable avatars
Each avatar in a group can open something, such as the person's profile.
- While piled, the whole pile is one target that spreads it, so a press never lands on someone hidden under another.
- Spread, each avatar is a target of its own, as large as a finger needs on a touch screen.
Show code, PressableAvatars.tsx
Rules
Beside a visible name an avatar is decorative; on its own it can be a picture named after the person.
Use it when
- A person or an organization beside their name, such as in a list of members
- The signed-in account's menu in the application's chromeAvatarButton
- A few people in a row where space is short, such as a project's membersAvatarGroup
Show code, NamesBeside.tsx
Show code, AvatarsAlone.tsx
Names
Give each person their full name, the same everywhere: it names the picture and chooses the initials and the color.
Groups and buttons
Show only as many people in a group as fit without wrapping, and use AvatarButton rather than an avatar inside a button of your own.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to an AvatarButton, each pressable avatar and the count; focus in a group spreads it. |
| Enter, Space | Presses an AvatarButton or a pressable avatar. |
| Esc | Closes a tooltip. |