Anatomy
- Content area: Area where the avatar content will be displayed. The different content can be:
- Icon when there is no information
- Initials when the name of the user or entity is known
- Image when the user or entity provides one.
Usage Guidelines
When to use this component
- Represent a single user (circular) or a single entity (rounded square).
- Provide quick visual identification in lists, headers, cards, tables, and profile areas.
-
Attribute authorship to content, such as reports, or comments.
When not to use this component
- Representing non-personal or non-entity content. Use an Icon for representing additional elements or metaphors.
-
Providing illustrative or decorative visuals alongside the interface (e.g., supporting illustrations, images or icons).
Best Practices
Use the circular avatar to represent a single user and the rounded square to represent an entity.
Do not use an avatar to represent diseases, services, or grouping stuff. Instead, consider using text, color, an icon, or any other appropriate component.
Display the user’s or entity’s name close to the avatar when possible, if not, make sure you add an ariaLabel and altText if the avatar is not purely decorative.
Do not scale or change the shape of the avatars. Make sure you use proper variants and sizing for their intended purpose.
Use up to two initials to differentiate users or entities if no image is available.
When using initials, do not mix avatars that represent the same user types. For instance, don't use the default for patients and the inverted for doctors.
To keep the proportion and properly frame an avatar use square images or allow the users to crop them into a square.
Do not use any alternative graphics over avatars, like icons, special characters, or emojis.
General Component Behaviors
Fixed size
The avatar is a component that has a fixed and proportional size, so that the content displayed in it is not distorted or takes up more space than necessary.
States
Empty
This is a default status used for both, users and entities, when they are logged out or there is no data to display.
With content
This status is displayed when there is information about users or entities. It can be an image or the initials of their name.
Variants
User with initials
The initials of the username are displayed if there is no image and if there is data for it. A maximum of 2 letters is allowed.
User with image
Displays the image that the user sets for their profile.
Entity with initials
The initials of the entity are displayed if there is no image and if there is data for it. A maximum of 2 letters is allowed.
Entity with image
Displays the image that has been set for the entity profile.
Styles
Default
A light shade of the accent color is used for the background, and a 1px border is also displayed. For the letters, the accent color is used.
Inverted
A dark shade of the accent color for users and the gray scale for entities is used for the background. Light shades of these two color scales are used to display the letters.
Sizes
Large
Medium
Small
Known Gaps
- Additional accessibility score details and guidelines.
- Possible component enhancements:
- The possibility of displaying indicators that can be used to indicate user status or other needs will be considered.
- The ability to interact with the avatar and change the image directly.
- Redefine the max number of letters allowed for the initials variant.