Avatar

An Avatar is a thumbnail representation of an individual, a business or other entity. They are typically used to distinguish between participants in an exchange, or to identify contacts in a list or directory.

• Interactive Playground
• Anatomy
• Type
• Behavior
• Specs
• Related Content

The Interactive Playground allows you to experiment with various avatar styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<figure
  status="none"
  class="neo-avatar neo-avatar--generic"
  aria-label="Joey Joe Joe Jr."
>
  <div class="neo-avatar-status neo-avatar-status--none">
  </div>
</figure>

<Avatar
  image={undefined}
  initials={undefined}
  label="Joey Joe Joe Jr."
  size="md"
  status="none"
  variant="generic"
/>

Avatars have standard components as shown below, all of which are required.

• Avatar Content:

  The avatar can be an image, initials, a silhouette icon, or a bot icon.

• Container:

  The avatar is shown within a circle with constrasting background color.

• Status Icon:

  An icon can be included to show the current presence status of the individual. The contact can be shown to be online or available, or offline or unavailable. This indicator is optional.

There are four variations to an avatar; generic silhouette, an image, a bot icon and the user initials.

Generic

Image

Bot

Initials

• Generic:

  This is a silhouette icon representing the person or entity. Use this type when none of the other types are applicable.

• Image:

  This is a picture of the individual.

• Bot:

  This icon is a generic representation of the contact indicating that this is an automated attendant or AI chat bot.

• Initials:

  If none of the other options are selected, the system will automatically insert the initials for the person's first and last names into the avatar.

Use an avatar to better identify contacts in a directory or another environment, such as during a chat session. Each contact has their own avatar to help recognize who is speaking, or which person you want to connect with.

User Types

Avatars can be used to differentiate between user types, such as human contacts, corporations, and automated systems.

DO: Use images and initial avatars as the default. Generic avatars can be used to distinguish between different types of users (such as offline guests).

DON'T: Do not use generic avatars as the default.

DO: Use the bot avatar to represent automated system interactions such as personalized assistants or virtual agents.

DON'T: Do not use a the bot avatar to represent a person or corporation.

DO: Use a maximum of 3 letters in the initials avatar type.

DON'T: Do not use more than 3 letters in the initials type. The text should never extend outside of the avatar container.

Status Indicator

An avatar can be matched with a status indicator to provide the user’s current availability. The use of a status indicator is optional.

Available

Away

Busy

Do Not Disturb

Offline

• Available:

  Shows that the agent is online, ready and available to connect.

• Away:

  The agent is away from their desk and is not available at the moment. Any messages sent will not be received until the agent is available.

• Busy:

  The agent is online but is on another call and cannot respond at the moment.

• Do Not Disturb:

  When this is shown, the agent is online but is busy with other tasks.

• Offline:

  If the agent appears offline, they are not logged into their system and will not respond until they return.

DO: Use status to convey a user's current availability.

DON'T: Do not use color alone to display the state as users who are color-blind may be unable to distinguish between states.

Avatars come in three sizes. Use the largest size that fits within the space allowed by the application and location. Be consistent. Do not mix-and-match different sizes on a single list or interaction.