Skip to content
Sancho UI
Toggle dark mode
Getting started
Components
Helpers
Built with ☕ by
Ben McMahen

Avatar

Display a profile image to represent a user with initials shown as a fallback. Inspired by the excellent Evergreen Avatar component.

Basic usage

Set the name and src attributes. By default, the src will display instead of the initials if provided. Set to aria-hidden="true" when displayed alongside the user's name.

Ben McMahen
<Avatar
  src="https://pbs.twimg.com/profile_images/775452326450475009/MTsFSYGs_400x400.jpg"
  name="Ben McMahen"
/>

Letters

If you're happy only showing initials, leave out the src attribute.

Ben McMahenBM
<Avatar name="Ben McMahen" />

Sizes

Ben McMahenB
James BondJB
Felix LeighterFL
JawsJ
Kissy SuzukiKS
<div className="Avatar-example">
  <Avatar size="xs" name="Ben McMahen" />
  <Avatar size="sm" name="James Bond" />
  <Avatar size="md" name="Felix Leighter" />
  <Avatar size="lg" name="Jaws" />
  <Avatar size="xl" name="Kissy Suzuki" />
</div>

API

Avatar
sizeAvatarSizes
Determine the size of the avatar
srcstring
The image source
srcSetstring
An alternative to setting the src attribute.
namestring
The name of the user. Used as an alt attribute, or used to generate initials in the absence of an image.