CE
PE
EE

since 11.0.0

Employment/Purpose

Avatargroup displays related Avatar components as an overlapping group. When space is limited, maxItems keeps the group compact by replacing excess avatars with a +N indicator.

Example

<avatargroup maxItems="3" shape="circle" size="small">
    <avatar label="A"/>
    <avatar label="B"/>
    <avatar label="C"/>
    <avatar label="D"/>
    <avatar label="E"/>
</avatargroup>

This example shows three avatars and a +2 overflow indicator.

Properties

MaxItems

Default Value: 0

Sets the maximum number of visible avatars. 0 shows every avatar. Negative values cause a WrongValueException.

Size

Sets a uniform small, medium, or large size for all child avatars. This group-level setting overrides each child’s displayed size without changing the child’s size property.

Shape

Sets a uniform circle or square shape for all child avatars. This group-level setting overrides each child’s displayed shape without changing the child’s shape property.

Accessibility

Use the client-attribute namespace to provide a group name:

<avatargroup xmlns:ca="client/attribute"
             ca:aria-label="Project members">
    <avatar label="JD"/>
    <avatar label="KL"/>
</avatargroup>

The ZK Accessibility add-on supplies the group role and an accessible description for the overflow indicator.

CSS Variables

Variable Default Purpose
--zk-avatargroup-overlap -8px Overlap between adjacent avatars

Supported Events

No component-specific events.

Supported Children

*Avatar

Adding another component type causes a UiException.