Avatar

Importing

import { Avatar } from '@customerio/pluma-components/react';

<Avatar name="John Doe" />

Usage

The Avatar component can display user avatars in several ways, following a priority order:

1. Custom image via src prop
2. Gravatar image via email prop
3. Text fallback using initials from name, email, or custom initials text

Basic Usage

<Avatar name="John Doe" />

With email (Gravatar)

React

React

Ember

Ember

CN

<Avatar 
  name="Colin Nederkoorn" 
  email="colin@customer.io"
/>

With tooltip

If you place the avatar without any context around it, it is recommended to add a tooltip so that the user can understand which user the avatar represents.

<Avatar 
  name="John Doe"
  withTooltip={true}
/>

Auto color

Use the autoColor prop to automatically generate a deterministic background and text color based on the user's name. This is useful for distinguishing users in lists when no image is available.

<Box display="flex" gap="100" flexWrap="wrap">
  <Avatar name="Cal Duke" autoColor />
  <Avatar name="Ivy Cox" autoColor />
  <Avatar name="Alice Wang" autoColor />
  <Avatar name="Tom Brady" autoColor />
  <Avatar name="Max Stone" autoColor />
  <Avatar name="Dan Cole" autoColor />
  <Avatar name="Leo Gray" autoColor />
  <Avatar name="Bob Martin" autoColor />
  <Avatar name="Ada Finn" autoColor />
  <Avatar name="Grace Liu" autoColor />
</Box>

Customizing

You should almost never need to customize the src, label, and initials. However, we do provide escape hatches for these cases.

React

React

Ember

Ember

JD

<Avatar 
  src="https://example.com/avatar.jpg"
  label="This is John Doe"
  initials="JD"
/>

Accessibility

The Avatar component follows accessibility best practices:

• Uses appropriate ARIA labels based on the provided label, name, or email
• Supports keyboard navigation when interactive elements tooltips are enabled