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 or a single entity.
- 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 round avatar to represent a single user and the rounded square to represent entities such as clinics or doctors in a professional context, for example in a listing.
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 accessibilityLabel 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.
Use the same variant to represent the same user type. For instance use "User" variant to represent all patients.
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 all avatars, when users are logged out or there is no data to display i.e, for deleted accounts.
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 type
3 different variants that represent different type of users are available. User, Doctor and Entity.
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.
With image
Displays the image that the user/entity sets for their profile.
Sizes
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.