My Design System

My Design System

Avatar

Source: TypeScript / Java

Avatar is a graphical representation of an object or entity, for example a person or an organisation.

Open in a
new tab
<vaadin-avatar></vaadin-avatar>
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}">
</vaadin-avatar>
<vaadin-avatar
  .img="${this.person?.pictureUrl}"
  .name="${`${this.person?.firstName} ${this.person?.lastName}`}"
>
</vaadin-avatar>
Note
Real-time collaboration
This component is optimized for use with Collaboration Engine—a simple way to build real-time collaboration into your app—but can also be used standalone as a regular component.

Content

Avatar has three properties: name, abbreviation and image.

Name & Abbreviation

The name is shown on hover in a tooltip. When a name is set, Avatar will auto-generate and display an abbreviation of the specified name. For example, “Allison Torres” becomes “AT”, “John Smith” becomes “JS”, etc.

Open in a
new tab
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}">
</vaadin-avatar>

The abbreviation can also be set manually. Abbreviations should be kept to a maximum of 2–3 characters.

Open in a
new tab
<vaadin-avatar name="Augusta Ada King"></vaadin-avatar>
<vaadin-avatar name="Augusta Ada King" abbr="AK"></vaadin-avatar>

Image

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

Open in a
new tab
<vaadin-avatar
  .img="${this.person?.pictureUrl}"
  .name="${`${this.person?.firstName} ${this.person?.lastName}`}"
>
</vaadin-avatar>
<vaadin-avatar .img="${companyLogo}" name="Company Inc."> </vaadin-avatar>

Avatar Group

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

Open in a
new tab
<vaadin-avatar-group
  .items="${this.items.map((person) => {
    return {
      name: `${person.firstName} ${person.lastName}`,
    };
  })}"
>
</vaadin-avatar-group>

Max Number of Items

You can specify the max number of items an Avatar Group should display. Items that overflow are grouped into a single Avatar that displays the overflow count. The name of each hidden item is shown on hover in a tooltip. Clicking the overflow item displays the overflowing avatars and names in a list.

Open in a
new tab
<vaadin-avatar-group
  .maxItemsVisible="${3}"
  .items="${this.items.map((person) => {
    return {
      name: `${person.firstName} ${person.lastName}`,
    };
  })}"
>
</vaadin-avatar-group>

Background Color

By default, there are 7 different background colors you can use for Avatar. The background color is set using a color index.

Open in a
new tab
<vaadin-avatar-group
  .items="${this.items.map((person, colorIndex) => {
    return {
      name: `${person.firstName} ${person.lastName}`,
      colorIndex: colorIndex,
    };
  })}"
>
</vaadin-avatar-group>

Using different background colors can be useful when you need to be able to distinguish between users, for example during collaborative work.

Internationalisation (i18n)

All of Avatar’s and Avatar Group’s default texts are configurable:

Avatar Texts

PropertyTextDescription

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

PropertyTextDescription

anonymous

"Anonymous"

Default name for all Avatars in the Avatar Group.

activeUsers.one

"Currently one active user"

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

activeUsers.many

"Currently {count} active users"

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

*{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.

Open in a
new tab
private i18n: AvatarGroupI18n = {
  anonymous: 'Anonyymi',
  activeUsers: {
    one: 'Yksi käyttäjä aktiivisena',
    many: '{count} käyttäjää aktiivisena',
  },
  joined: 'liittyi',
  left: 'lähti',
};

render() {
  return html`
    <vaadin-avatar-group
      .i18n="${this.i18n}"
      .items="${this.items.map((person) => {
        return {
          name: `${person.firstName} ${person.lastName}`,
        };
      })}"
    >
    </vaadin-avatar-group>
  `;
}

Size Variants

Avatar has four size variants available:

Open in a
new tab
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="xlarge">
</vaadin-avatar>
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="large">
</vaadin-avatar>
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="small">
</vaadin-avatar>
<vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="xsmall">
</vaadin-avatar>
VariantTheme name

Extra large

xlarge

Large

large

Small

small

Extra small

xsmall

Size variants should only be used 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.

Open in a
new tab
<vaadin-menu-bar .items="${this.menuBarItems}" theme="tertiary-inline"> </vaadin-menu-bar>