Avatar component vs. Image variant

[lcordobapuerto]

As we explore the possibility of adding a new component and leveraging the actual presence of Avatar-like elements in our products, we are contemplating the best method to integrate this asset in Halstack. So far, we have screened two possible options:

1. Create a dedicated Avatar component, serving as a visual representation of the user (either through illustration, picture, or initials).
2. Take advantage of our existing Image component and add a new variant specifically designed to fulfill the Avatar role.

[kukoc]

For me it would make sense to have a component and enforce the consistency of this element which I believe it's widely used in our Products. Correct me If I'm wrong, but using an image component, it would force the developers to aply some css to a square image to make if round for example. There is nothing wrong for the developers writing css, but everytime they do, they can go off-rails.

I'd like to have a component like the one I've seen in Ant, Atlassian or Goldman Sachs:

• https://atlassian.design/components/avatar/examples
• https://ant.design/components/avatar
• https://design.gs.com/components/avatar

I don't think we need too many variants, just the square and the round, with different sizes and also being able to configure a Text (couple of letters), an icon or an image.

Also, it would allow us to think about nice patterns like these ones:

But I'm not sure. I've always heard that Halstack is not too opinionated, which means that we should allow some level of freedom in our designs..

[Mil4n0r]

I think that creating a dedicated new Avatar component would be the addecuate choice here. It provides semantic clarity, customization options, consistency and accessibility considerations. Not all of these benefits may be fully achievable by extending the existing image functionality.

A dedicated Avatar component allows for specific customization options tailored to avatar-like elements. We would be able to include features such as placeholder initials, predefined shapes, and avatar size variations, providing greater flexibility in representing users visually.