Avatar

Component checklist

Types

There are four avatar variations: user, profile, chatbot, and user group. If none of these fit your needs, you have the option to use a custom avatar.

User avatar is used to represent a person. Depending on the context, the user avatar displays either the user's photo, initials, or remains in an empty state.

• Profile avatar is used for the image or logo of a company. Depending on the context, the profile avatar displays the profile image or remains in an empty state.
• Chatbot avatar is used only for Emplifi Bot.
• User group avatar is used only for the "User group" section.
• Custom avatar is used for the identity of another entity. For the custom avatar, use our UI icons page.

 

Sizes

The avatar is available in five sizes. The size of the avatar depends on the context. The recommended sizes are as follows: Medium or Small.

• Large: In a spacious interface, use the large avatar size.
• Medium: Use medium as the default size for posts, content or inspiration cards, tables, tooltips, widgets, and chat bubbles.
• Small: Use the small size for interactive elements or when you need to save space (e.g. user list, profile list, accordions, widgets).
• Tiny: Use the tiny size when there is limited space (e.g. list items).
• Micro: Use the micro size when there is not enough space for the tiny avatar. Micro is not available for the custom avatar.

 

Variants

There are different variants available to choose from for the user and profile avatars.

• User: There is an option to choose between image, initials, or empty, depending on the situation in which you want to use it. Use initials when the user hasn't uploaded an image in Emplifi Settings. Use the empty state when the social media account doesn't have a profile image uploaded to the native platform.
• Profile: There is an option to choose between image or empty, depending on the situation in which you want to use it.

 

Initials

Depending on what data the user provided in Settings, there are two options for initials: full name or email only.

• Full name: (e.g. Marvin Murphy) In case the user has provided their full name in Settings, we will show the first letters of the name and surname without a space between. If the user has a preposition in the name, e.g. Johann von Trauttenberg, we will ignore the preposition and follow the same rule.
• Email only: (e.g. murphy.m@toutique.io) In case the user has provided only their email in Settings, we will show the first letter of the email address.

 

Badge

Indicator/Status

The color circle located at the bottom right corner indicates the status of the avatar. Options are online, offline, or away

 

Progress

The border around the avatar indicates human interaction.

 

Badge with number or icon

• With number: Use the number for notification
• With icon: if you have limited space, you can perform a specific action for the avatar (e.g. to indicate that the user/profile or group is locked for editing).
• Sizes: Avatar badges are available in four sizes. The recommended sizes are as follows: Medium or Small.