Avatar

Percievable

The avatar component provides a visually distinguishable thumbnail of a user photo or a visual representation of any other type of content. It displays the image in the specified size, allowing users to perceive and recognize the avatar. The component supports different styles, such as a square portrait or a circular avatar, which further aids in visual perception.

Operable

Users can click on the avatar, triggering the onClick event handler. This allows for associated actions or behaviors, such as displaying more information about the user or navigating to their profile. The component provides feedback by logging a message to the console when clicked, demonstrating its operability.

Understandable

The purpose of the Avatar component is clear, providing a visual representation of a user or content. Users can easily identify and associate the avatar with the corresponding user or entity. The component supports different sizes and border radius options, allowing for customization based on design requirements. While support for initials is coming soon, the current implementation focuses on displaying an image specified by the src URL.

Robust

Designed to be compatible with assistive technologies, ensuring that screen readers can convey the presence and purpose of the avatar. It functions consistently across different browsers and platforms. The component supports different background colors, including team colors or semantic color tokens, enhancing the robustness of its visual representation.