AvatarGroup

An AvatarGroup is a row of UserAvatars that overlap. With a maximum, it shows the first avatars and a "+N" count for the rest.

Four avatars that overlap, with a +2 count at the end

How to show the members of a team:

<tb:AvatarGroup name="team" max="3">
    <tb:UserAvatar display-name="Ada Lovelace" />
    <tb:UserAvatar display-name="Grace Hopper" />
    <tb:UserAvatar display-name="Alan Turing" />
    <tb:UserAvatar display-name="Linus Torvalds" />
    <tb:UserAvatar display-name="Margaret Hamilton" />
</tb:AvatarGroup>

var team = root.Q<AvatarGroup>("team");
team.Add(new UserAvatar { DisplayName = "Katherine Johnson" });
team.Refresh();

Member	Description
`Max` (`max`)	The most avatars to show. The rest shows as a "+N" count. 0 (the default) shows all avatars.
`Refresh()`	Shows the first `Max` avatars and the count again. Call it after you add or remove an avatar from code.

The children of the group are the avatars. Each avatar covers the right edge of the avatar before it.
The count is a circle after the last avatar that shows. It has no count when all avatars show.
The count has the size of the first avatar.
Each avatar has a ring in the surface color, so the avatars stay apart.

Tips:

Give all avatars of a group the same Size.
The tooltip of each avatar is its name. For the names behind the count, set tooltip on the group.
On a background that is not the surface color, set the border color of the ring to that background. See the example below.

Styling

Class	Element
`tb-avatar-group`	The row. Each child overlaps the child before it by 8 px.
`tb-avatar-group__more`	The count: a circle in `--tb-color-surface-alt` with bold small text. Hidden when all avatars show.

.tb-avatar-group .tb-avatar__image,
.tb-avatar-group__more { border-color: var(--tb-color-background); }

#AvatarGroup

#Styling

AvatarGroup

Styling