Avatar group
An overlapping row of avatars with computed overflow count.
Try it
Overflow group
Shows collaborators with a count for the remainder.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% load brickwork_components %}
{% bw_avatar_group avatars=collaborators max=max size=size %}context = {'collaborators': [{'initials': 'AL', 'aria_label': 'Ada Lovelace'}, {'initials': 'GH', 'aria_label': 'Grace Hopper'}, {'initials': 'MB', 'aria_label': 'Margaret Hamilton'}, {'initials': 'DS', 'aria_label': 'Donald Knuth'}, {'initials': 'LN', 'aria_label': 'Linus Torvalds'}], 'max': 4, 'size': 'sm'}Guide
Add it to your project
- Load `brickwork_components`.
- Pass avatar dictionaries to `{% bw_avatar_group %}`.
- Set `max` to reserve a final overflow chip when the list is long.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| avatars | list[dict] | Not set | Yes | Avatar dictionaries accepted by the avatar component. Constraint: Each avatar record uses the avatar fields, including a meaningful image alternative or initials fallback. |
| max | int | 0 | No | Maximum visible positions; zero shows every avatar. Constraint: When overflow applies, the final visible position is the +N chip. |
| size | str | md | No | Default child size. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| shape | str | circle | No | Default child shape. Allowed: circle, square. Constraint: Allowed values: `circle`, `square`. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- The group has an accessible group name; the overflow token is text rather than a control.
- Responsive
- No breakpoint switch.
- Without JavaScript
- Static HTML only.
Need help?
Troubleshooting
Contract check: Include-only context (advanced): visible (list), overflow (int), size, shape.
Use the documented visible-avatar and overflow values supplied by the avatar-group preparation path; do not pass an arbitrary overflow label.