Docs

Avatar

Avatar is a graphical representation of an object or entity, such as a person or an organization.
<Avatar />
<Avatar name={`${person.firstName} ${person.lastName}`} />
<Avatar
  img={person.pictureUrl}
  name={`${person.firstName} ${person.lastName}`}
/>

Content

Avatar has three properties: name, abbreviation, and image. These are described in the sections that follow.

Name & Abbreviation

Hovering shows the name in a tooltip. After setting a name, Avatar auto-generates and displays an abbreviation of the specified name. For example, "Allison Torres" becomes "AT", "John Smith" becomes "JS", and so on.

You can set the abbreviation, manually. However, abbreviations should not exceed two or three characters.

Image

Avatar can be used to display images, such as user profile pictures or company logos. Abbreviations aren’t shown when images are used.

Avatar Group

Avatar Group is used to group multiple Avatars together. It might be used, for example, to show that there are multiple users viewing the same page or for listing members of a project.

<AvatarGroup
  items={persons.map((person) => ({
    name: `${person.firstName} ${person.lastName}`,
  }))}
/>

Maximum Number of Items

You can specify the maximum number of items an Avatar Group should display. Items that overflow are grouped into a single Avatar that displays the overflow count.

Hovering, though, shows the name of each hidden item in a tooltip. Clicking the overflow item displays the overflowing avatars and names in a list.

Background Color

By default, there are seven background colors you can use for Avatar. Use the color index to set the background color.

Internationalization (i18n)

All texts in Avatar and Avatar Group are configurable.

Avatar Texts

Property Text Description

anonymous

"Anonymous"

Avatar’s default name. Shown on hover in a tooltip and announced by screen readers when the Avatar is focused.

Avatar Group Texts

Property Text Description

anonymous

"Anonymous"

Default name for all Avatars in the Avatar Group.

activeUsers.one

"Currently one active user"

Announced by screen readers when there is one Avatar in an Avatar Group and the Avatar is focused. Screen readers read aloud first the name of the Avatar.

activeUsers.many

"Currently {count} active users"

Announced by screen readers when there are multiple Avatars in an Avatar Group and an Avatar is focused. Screen readers read aloud first the name of the focused Avatar.

*{count} is the Avatar Group item count.

joined

"{user} joined"

Announced by screen readers when an Avatar is added to the group.

*{user} is the Avatar’s name.

left

"{user} left"

Announced by screen readers when an Avatar is removed from the group.

*{user} is the Avatar’s name.

Size Variants

Avatar has four available size variants. They’re listed in the table here:

Variant Theme Name

Extra Large

xlarge

Large

large

Small

small

Extra Small

xsmall

Size variants should be used only in special cases. See Size and Space for details on how to change the default Avatar size.

Use Cases

Avatar can be paired with Menu Bar to create a user account menu.

Important
You can find more information in the corresponding article on vaadin.com.