Avatar
Represents a person or organisation with initials, and optionally shows that they are online.
Try it
Turn on the dot, then step down through the sizes.
Content
Size
Family
Initials
Square
Dot
<WildAvatar
size="md"
color="blue"
src="/team/aroha.jpg"
/>When to use
- Use an avatar to mark a person or organisation in a list: an activity row, a table cell, a stacked group.
- Use round for people and square for organisations and sites. Don’t mix the two in one list.
- Use the dot for presence only. It has one meaning: online.
Don’t use it
- As the only label. Put the name in text beside it.
- To show a status. Use a badge.
Sizes
Eight, from 16 to 64px, so one avatar works in a table cell and on a profile screen.
3xs · 16
2xs · 20
xs · 24
sm · 32
md · 40
lg · 48
xl · 56
2xl · 64
<WildAvatar size="sm" initials="JM" color="blue" />
<WildAvatar size="md" src="/team/jm.jpg" alt="Joel Mann" />Colour families
Six. Pick the family from the name, so the same person is the same colour on every screen.
blue
green
orange
red
purple
neutral
Shape and presence
round
square
dot
square · dot
xs
sm
md
lg
Accessibility
An avatar isn’t focusable, and its initials are read out as letters. The dot is announced as “Online”.
- Keep the person’s name in text beside the avatar.
- Give a photo an
alt, or leave it empty when the name sits beside it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | 16, 20, 24, 32, 40, 48, 56 or 64px. |
| initials | string | — | One or two letters. Only the first shows below 24px. |
| src | string | — | Photo URL. Replaces the initials. |
| alt | string | '' | Text alternative for the photo. |
| color | 'blue' | 'green' | 'orange' | 'red' | 'purple' | 'neutral' | 'blue' | Colour family behind the initials. |
| square | boolean | false | 8px corners, for organisations and sites. |
| dot | boolean | false | Green presence dot, announced as Online. |
| style | CSSProperties | — | Merged onto the outer box. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --radius-full | 9999px | The round shape. |
| --radius-lg | 8px | The square shape. |
| --color-primary-light | #EBFAFF | Blue family ground. |
| --global-blue-1100 | #0C296A | Blue family initials, 12.75:1 on the blue ground. |
| --color-grey-900 | #4F4D55 | Neutral family initials. |
| --color-success | #019939 | The presence dot. |
| --font-weight-semibold | 500 | Initials. |