Avatar ⛔️

Avatar defines users' identifications in a visual way using images or names.

Principles

Use when

  1. represent a user within the product.
  2. displaying the user credentials on the layout.

Don't use when

  1. identifying different kinds of records, instead use badge.
  2. using a placeholder for entities.

Properties

Types

User-initials

This type is used as a placeholder, using the user's initials, when users don't upload an image for their credentials.

User-image

It can be used when a user is using or has uploaded an image.

 

States

Enabled

When the avatar is enabled and can trigger an overflow menu.

Hover

While hovering, if the user initials are shown on the avatar, the avatar background changes. However, if there is an image on the avatar, a circle will appear while hovering.

Focus

In the focus state (when the tab key is active), pressing Enter will open an overflow menu (if it exists). In the focus state (or when using the tab key), the avatar background displays a standard blue ring.

Attribute

Status-indicator (boolean)

If the avatar triggers the overflow menu and there is information to be updated or announcement content within this menu, it can be used to display these situations.