Overview

The avatar component is used to represent a user profile or a store.

Usage

• Use a border around the avatar only when the avatar is positioned in front of a non-even color background (ex: banners)
• Don’t use the verified checkmark when it doesn’t add any relevant information (ex: in user DMs)
• Use the avatar size that best matches the hierarchy of the elements surrounding it

Variants

The avatar component consists of two variants: an image avatar and an initials avatar. The image avatar displays an uploaded image, whereas the initials avatar utilizes the first letter of the user's or store's name. This component is available in four distinct sizes: small, medium, large, and extra large. Additionally, the avatar component offers optional properties for displaying a verified checkmark and adding a border around the icon.