Status
The status of the component
Status
The status of the component
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
The avatar content may be initials only (default) or contain a user image.
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.)
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.
The avatar component comes in four sizes - large, medium, small, and x-small.
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.)
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.
Presence |
Sub-presence |
---|---|
Available |
- |
Busy |
Meeting |
Away |
Break, Meal, and Training |
On Queue |
- |
Offline |
- |
Out of Office |
- |
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.
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.
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.
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.
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.