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.
When using only an icon inside the Avatar, be sure to set the aria-label prop to support users who rely on screen readers.
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
The skeleton property is used to display a loading state for the component 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.
While the badge can be used with all avatar sizes, it's only intended used for larger avatars as it will otherwise overlay too much of the avatar itself.
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.