Skip to content

Avatar

Initials or a photo for a person or workspace, with a stable tint from the name.

DataServer-rendered

Examples

Sizes

The tint is a hash of the name: the same name always gets the same colour.

Light
Dark
Example
<Avatar name="Ryan Park" size={20} />
<Avatar name="Ryan Park" size={24} />
<Avatar name="Ryan Park" size={28} />
<Avatar name="Ryan Park" size={32} />
<Avatar name="Ryan Park" size={40} />

People and workspaces

Circle for people, square for workspaces. One-word names use their first two letters.

Example
<Avatar name="Maya Chen" size={32} />
<Avatar name="jo.alvarez@example.com" size={32} />
<Avatar name="Acme" size={32} shape="square" />
<Avatar name="Platform team" size={32} shape="square" />

Next to a visible name

Mark it decorative so the name is not read twice.

Maya Chen

Example
<Inline gap="2">
  <Avatar name="Maya Chen" size={24} decorative />
  <Text size="sm">Maya Chen</Text>
</Inline>

Usage

Usage
import { Avatar } from '@switchboard/ui'

<Avatar name={user.name} src={user.avatarUrl} size={24} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

Avatar

Avatar props
PropTypeDefaultDescription
name*string–Person or workspace name. Gives the accessible name, the initials and the tint.
srcstring–Photo URL. Drawn over the initials, which show while it loads or if it fails.
size20 | 24 | 28 | 32 | 4028Diameter in pixels.
shape'circle' | 'square''circle'Circle for people, square for workspaces.
decorativeboolean–Hide from assistive tech, for use next to a visible name.

Also accepts every <span> attribute.

Accessibility

  • By default it is role="img" with aria-label set to the name; the initials and the photo are hidden from assistive tech.
  • With decorative it is aria-hidden, so a name shown next to it is read once.
  • Initials on tints use the *-ink tokens, which meet contrast in both themes.

Guidance

Do

  • Pass the full name, not initials; the component works them out.
  • Use 24px in the topbar and table rows.

Don’t

  • Use an avatar as the only way to tell who someone is in a list; show the name too.
  • Pick the tint by hand.