Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
AvatarGroup
Overlapping avatars with a "+N" overflow, rendered as
<div is="root-avatar-group">.
Usage
<div is="root-avatar-group" max="3">
<span is="root-avatar" aria-label="Ada"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%236366f1'/%3E%3C/svg%3E" alt="" /></span>
<span is="root-avatar" aria-label="Linus"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%2310b981'/%3E%3C/svg%3E" alt="" /></span>
<span is="root-avatar" aria-label="Grace"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23f59e0b'/%3E%3C/svg%3E" alt="" /></span>
<span is="root-avatar" aria-label="Alan"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23ef4444'/%3E%3C/svg%3E" alt="" /></span>
<span is="root-avatar" aria-label="Margaret"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%238b5cf6'/%3E%3C/svg%3E" alt="" /></span>
</div>
A role="group" holding avatar children, overlapped. With max set it
shows the first max and appends a decorative +N counter for the rest; the
group's accessible name reports the total count.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
max |
number |
- | Show the first N avatars; overflow the rest into a +N counter |
aria-label |
string |
'N users' |
Group accessible name (defaults to the count) |
Extends
HTMLDivElement - use with <div is="root-avatar-group">.