💠 Avatar

Visual representation of a user or entity.

Usage

The Avatar component serves as a visual representation of a user or entity, typically displayed as a profile image or a placeholder graphic when the image is not available.

It can be used to signal user presence, attribute content, or indicate ownership.

Avatars often accompany user names in interfaces where user identification is important, such as in comments, chat applications, or user profiles.

When to use

• User identification: Use the Avatar in any part of your UI where it is necessary to identify the user quickly, such as in navigation bars, headers, or any social interactions.
• Content attribution: Use an Avatar next to content created or owned by a user to provide a visual link between the content and its creator.
• Presence indication: In collaborative applications, Avatars can indicate user presence, showing who is online or active.
• Listings and menus: Incorporate Avatars into lists, such as contact lists or menus, to assist users in finding and selecting options more efficiently.

Avoid using Avatars for decorative purposes that do not enhance user understanding or navigation. Also, be cautious with the use of Avatars in high-density displays, as they may clutter the interface and reduce readability.

Examples

Size

There are 5 standard size available for the avatar component: xs, sm, md, lg, xl.

Fallback

The AvatarFallback is an element that renders when the image hasn't loaded.

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: