Avatar
Avatars serve as visual representations of users or entities within a system, enhancing recognition and personalization. Ensuring clarity, accessibility, and consistency is crucial for effective avatar components.
API Reference
| Prop | Type | Default |
|---|---|---|
src | string | - |
name | string | - |
size | SizeTypes | large |
status | StatusTypes | - |
Examples
Status
Usage
General Guidelines
Do's
- Use representative images that clearly identify the user or entity.
- Implement fallback options (e.g., initials or generic icons) when images are not available.
- Maintain consistent sizing across different parts of the application.
- Provide alt text for accessibility, ensuring screen readers can describe the avatar.
- Support various shapes (e.g., circular, square) to match the design system.
- Allow users to update their avatars easily to reflect changes or preferences.
- Ensure avatars are responsive, adapting to different screen sizes and resolutions.
Don'ts
- Don't use unclear or low-resolution images that make identification difficult.
- Avoid overly complex designs that detract from the primary function of the avatar.
- Don't ignore accessibility, such as by not providing descriptive alt text.
- Avoid inconsistency in avatar sizes or shapes across the application.
- Don't use avatars for non-representative purposes, like decoration without context.
- Avoid excessive reliance on avatars for conveying important information.
Writing Guidelines
When to use
- When user representation is not necessary or relevant to the context.
- For displaying large amounts of information that require more than just an image.
- In situations where text-based identification is more appropriate.
- When dealing with highly sensitive information without ensuring privacy.
When not to use
- Displaying the user's avatar on their profile page.
- Showing avatars next to user-generated content.
- Representing contacts with avatars in lists and address books.
- Using avatars to indicate the user related to a notification.
- Including avatars in team or project management dashboards.
Use Case
General Use Cases
- Displaying the user's avatar on their profile page.
- Showing avatars next to user-generated content.
- Representing contacts with avatars in lists and address books.
- Using avatars to indicate the user related to a notification.
- Including avatars in team or project management dashboards.
Digital Health Use Cases
- Displaying patient avatars in their medical records.
- Showing avatars of doctors and patients in scheduling interfaces.
- Allowing patients to upload avatars for personalized experiences.
- Representing users in forums or support groups with avatars.
- Displaying avatars of healthcare providers in virtual consultations.