Avatar

Features

• Shows initials if no image source is provided.
• Generates a background color if no image source is provided.
• Prevents content flashing by checking if the image source exists.

When to use

At Pleo, we primarily use avatars to represent a user, either with a profile picture or initials if a picture hasn't been provided. We also use them to represent merchants in expenses or subscriptions.

Examples

Sizes

The component comes in a few different sizes.

Icons

In some cases we show an icon inside the avatar. An example of this is when we're representing merchants in expenses or subscriptions.

Fallback

If the image of the avatar fails to load, we show a fallback based on the provided name. The name is used to generate initials and a background color from a limited palette.

Outline

We show an outline around avatars when stacked in an AvatarGroup or simply to create contrast when presented on a none white background.

Disabled

A disabled version of the avatar can be used e.g. when a user has been deactivated, indicating that their profile is inactive and preventing any confusion about their current status.

Placeholder

A placeholder avatar can be used when data is unavailable, such as when an employee is invited to join a company in Pleo but has not yet onboarded. In this case, the placeholder prevents confusion by indicating that a profile exists but is not yet fully set up.

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Badge

A companion component used to show an icon badge on top of an avatar. We use this in expenses to show categories or to reflect a private or pending purchase.

Examples

Variant

In some cases, you may want a badge to stand out if it's meant to communicate something of urgency or prominence. That can be done with a variant.

AvatarGroup

A companion component used to show a group/list of avatars.

Examples

Size

If a size is provided to the avatar group, it will automatically be propagated down to the individual avatars within it.

Max

If you're working with dynamic data, it's possible to limit the amount of avatars shown. Additional avatars will be represented with an excess number component.

Stacked

We sometimes show avatars stacked on top of each other if there's limited horizontal space and/or it's more relevant how many people there are than precisely who they are.

Accessibility

WCAG success criterion 1.1.1 (Non-text Content, Level A) requires that all non-text content have a text alternative that conveys the same purpose.

Avatars are inherently visual, so it’s important to ensure their meaning is accessible to all users, including those using assistive technologies, such as screen readers.

Images

When an Avatar contains an image, its alt text is automatically set to the Avatar's name. As a result, no additional action is required to ensure accessibility.

Icons

For Avatars containing an icon, provide a text alternative using the visuallyHiddenText prop.

The same applies to Avatar badges.

Decorative

If an Avatar’s meaning is already conveyed through accompanying text, it can be considered decorative. Set the decorative prop to hide it from screen readers and prevent redundant announcements.