Avatar β

Avatars are graphical representations of users through a profile picture or initials.

Component checklist

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

 

Usage Guidelines


Content types

The avatar content may be initials only (default) or contain a user image.

Avatar type variants - user initials and user image.

Avatar type variants - user initials and user image.

 

User initials (default)

The default avatar content displays the user’s initials instead of a generic silhouette. The system automatically chooses an accent color based on the name to add extra context and distinction to the avatars. These accent colors are predetermined sets of accent and text color combinations that guarantee a minimum color contrast of 3:1 (AA WCAG 2.)

 

Different avatars displaying the users’ initials.

Different avatars displaying the users’ initials.

Using different accent colors based on the name helps increase the distinction between avatars sharing the same initials.

Using different accent colors based on the name helps increase the distinction between avatars sharing the same initials.

 

User image

User pictures in avatars increase personalization and recognition, conveying more information about the user, fostering a sense of community, and increasing engagement and productivity. Our avatar user image variant follows a standard photo treatment.

User images for avatars increase recognition.

User images for avatars increase recognition.

 

Sizes

The avatar component comes in four sizes - large, medium, small, and x-small.

Avatar sizes - large, medium, small, and x-small.

Avatar sizes - large, medium, small, and x-small.

 

 

Behavior


 

Presences

Presence indicates a user's availability or status. Depending on the interface, this can be represented by a colored ring around the Avatar, a badge with an icon label, or a combination of both. The purpose is to help users quickly understand their colleagues' status, improving communication and collaboration.

Our avatar component comes with six presences (available, busy, away, on-queue, offline, and out of office.)

Avatar presences - available, busy, away, on-queue, offline, and out of office.

Avatar presences - available, busy, away, on-queue, offline, and out of office.

 

Sub-presences

Avatars can have sub-presences that provide additional context to the user's status. For instance, "Meeting" is a sub-presence of "Busy," while "Break" is a sub-presence of "Away." To learn more, refer to the graphic and chart below.

 

Graphic of the Avatar sub-presences and their parent presences.

Graphic of the Avatar sub-presences and their parent presences.

Presence

Sub-presence

Available

-

Busy

Meeting

Away

Break, Meal, and Training

On Queue

-

Offline

-

Out of Office

-

 

Notifications

The avatar component includes a notification badge that indicates new events. The Avatar is stroked with the badge when a new notification is received. This feature makes it easy for users to see if there are any critical updates quickly.

Avatars with different presences are stroked with a notification badge.

Avatars with different presences are stroked with a notification badge.

 

UC Integrations

Users can show their availability on other supported platforms through the avatar. Unified Communications is a property/slot that handles Unified Communications integrations for supported platforms such as Teams, Zoom, and 8x8. This property is only available in the large avatar size.

Avatars with UC integrations indicators for Teams, Zoom and 8x8.

Avatars with UC integrations indicators for Teams, Zoom and 8x8.

 

 

Content


 

Ring

The Avatar presence ring is a circle around a user's profile picture that indicates their availability, such as online, offline, away, busy, or in a meeting. The color of the ring changes with the presence. The ring can be used in combination with the badge; read the behavior section for more information. Use the ring alone when indicating the presence isn’t critical.

An example of the Avatar, where the ring represents various presences.

An example of the Avatar, where the ring represents various presences.

 

Badge

The avatar presence badge is an icon-based element that indicates a user's availability. It changes the icon and color depending on whether the user is online, offline, away, busy, or in a meeting. The badge can be combined with the ring; read the behavior guidelines section for more information.

Graphic of the Avatar sub-presences and their parent presences.

Graphic of the Avatar sub-presences and their parent presences.

 

When should the presence ring and badge be combined?

When indicating a presence on a page is critical, we recommend combining the status ring and badge. This provides a layer of visual communication that makes it easier for users to identify their colleagues' statuses.

 

Consider how much users need to know their colleagues' status to decide whether to combine the ring and badge. Combine them if necessary, but especially on smaller avatar sizes or content-dense pages; using them separately may be enough.

 

Minimize the cognitive load and design the interface to balance the need for information with usability and simplicity.

Avatar presences conveyed by the combination of the ring and badge.

Avatar presences conveyed by the combination of the ring and badge.

❌ Don’t

❌ Don’t

Don't layer a presence ring with badges in which semantics are incompatible.

✅ Do

✅ Do

Only the notifications override a presence badge.