Avatar

Importing

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

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 (only when withGravatar is enabled)
3. Text fallback using initials from name, email, or custom initials text

Basic Usage

With email (Gravatar)

Passing an email derives the avatar's initials and label. To also look up a Gravatar image for that address, opt in with withGravatar. Gravatar is off by default — only enable it where surfacing a third-party image for an email is appropriate (e.g. your own team members), not for your customers' own contacts.

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.

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.

Size

Use the size prop to pick from the same four tiers as Coin (sm, md, lg, xl), defaulting to md. The initials text scales with the size to stay balanced inside the avatar.

Customizing the initials text

The initials typography is derived from size, but you can fine-tune it with the text-prefixed props: text (a typography style), textSize, textWeight, textFamily, and textFontStyle. Passing textSize (or a full text style) overrides the size-balanced default.

Customizing

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

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