Avatar Group
The <pura-avatar-group> stacks <pura-avatar> elements with overlap and a separator ring, propagating its size to the children and, via the max attribute, collapsing the overflow into a "+N" bubble that opens a popover listing who was left out. Use it to represent participants, teams or collaborators compactly. It is agent-native: it exposes role="group", stable data attributes (data-total, data-shown, data-overflow), a global registry at window.__puraAvatarGroups and the public API total/overflow/showOverflow()/hideOverflow(), letting agents read the state and open the popover programmatically.
Preview
<pura-avatar-group max="4" size="md" label="Project team">
<pura-avatar initials="AS" name="Anna Smith"></pura-avatar>
<pura-avatar initials="BC" name="Brian Carter"></pura-avatar>
<pura-avatar initials="CL" name="Carla Lee"></pura-avatar>
<pura-avatar initials="DM" name="Diego Morris"></pura-avatar>
<pura-avatar initials="EF" name="Elena Fisher"></pura-avatar>
<pura-avatar initials="GR" name="Gabriel Ross"></pura-avatar>
</pura-avatar-group>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
max | number | 0 | Maximum number of avatars shown before collapsing the rest into a "+N" bubble. 0 or absent shows all of them. |
size | "sm" | "md" | "lg" | md | Size applied (passthrough) to each child <pura-avatar> and to the overflow bubble. |
label | string | Avatar group | Accessible name of the group (aria-label). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/avatar-group.js"></script>import "./pura/lib/avatar-group.js";