vocab.design

component · messaging

Avatar group

also called avatar stack (primer), face pile (community), facepile (community), stacked avatars (community)

Several avatars overlapped in a row to show a set of people compactly, with a plus n counter standing for the rest.

An avatar group answers “who is on this” in the width of a table cell. The overlap is not decoration: it says these faces are one set rather than a list, and the ring drawn around each circle is what keeps the stack readable when two photographs happen to be the same colour. Three to five faces is the usual budget, and everyone past that becomes a counter.

The counter is the part people get wrong. A plus n chip is a control, not a caption, so it should say how many are hidden (not the total), open something that names them, and be reachable by keyboard. If the rest of the set is not available anywhere, the group is claiming a promise it cannot keep, and a plain text count reads better than a chip that does nothing.

Order carries meaning whether you intend it or not: the leftmost face reads as the most important one, so put the assignee, the owner, or the current user first, and keep the order stable between renders. A group that reshuffles on every refresh looks like a bug even when the membership has not changed.

For assistive technology, the group is one thing with a label (“5 reviewers”), not five images to be read one after another. Stacked photographs alone say very little, so pair the group with names on hover, in the overflow, or in the text beside it, and never use it as the only place a name appears.

Which word?

If you wantsay
a row of overlapping faces with a plus navatar group

Related

See also: Avatar · Presence indicator

Implementations

Specimens illustrate the concept; for production use, start here.

fluentAvatar group

Sources