Skip to main content

Avatar

Create a visual representation of a user, entity, or product.

Avatars come in three types: user (image and placeholder, and show more), icon, logo, and avatar group.

View in StorybookExternal link icon

Behavior​

  • Avatars show the full name when hovered over, and by default, the name is displayed beneath the avatar.

  • A user avatar without an image displays the first letter of the user's first name.

  • Selecting "show more" reveals the full list of truncated entities.

Usage​

User image and placeholder​

Use the user images and placeholders to display users.

Show more​

Use the "show more" to display several entities hidden in the user group.

Icon​

Use icons when user images are unavailable or inappropriate for your purpose. Customize the icon colors and backgrounds to match your requirements.

Use logo to display brand, product, and company logos.

Customize the logo background colors using lighter shades of gray: Gray/000, Gray/100, or Gray/200. For logos displayed inside a List item, always use Gray/000 as the background.

Uploading logos to the Master Data​

Follow these guidelines to ensure visual consistency when uploading logos to Master Data:

  • User raster image format.
  • Center-align logomarks.
  • For logomarks on transparent backgrounds fill roughly 90% of the frame height or width.
  • For logomarks on non-transparent backgrounds, fill the entire frame.
Do IconDo
Do Example
Don't IconDon't
Don't Example
Do IconDo
Do Example
Don't IconDon't
Don't Example
Do IconDo
Do Example
Don't IconDon't
Don't Example

Avatar group​

Use user group to display groups of users or entities with logos.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the menu avatar's visual hover state ('Show more' type) and adds a 2px ring.
  • Apply the focus state only if the Avatar contains a link to a particular entity.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

The avatar supports standard keyboard interactions, allowing users to navigate to the element with the Tab key and activate it with the Enter key when focused.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.