@sigx/lynx-zero · Beta · Component library

AvatarGroup#

A stack of avatars with a count for the ones left out, on zero's avatar-group anatomy. The group sizes and colours its avatars, overlaps every one after the first, and shows +N for the rest. It is display-only: no model and no state.

Import#

TSX

import { Avatar, AvatarGroup } from '@sigx/lynx-zero';

AvatarGroup is a compound with Root and Overflow. <AvatarGroup> is the same component as <AvatarGroup.Root>.

Usage#

Slice your own list, render the avatars you keep, and pass how many you left out as count:

TSX

import { Avatar, AvatarGroup } from '@sigx/lynx-zero';

const shown = members.slice(0, 4);

<AvatarGroup.Root label="Project members" size="sm">
    {shown.map((u) => (
        <Avatar.Root key={u.id}>
            <Avatar.Image src={u.photo} alt={u.name} />
            <Avatar.Fallback><text>{u.initials}</text></Avatar.Fallback>
        </Avatar.Root>
    ))}
    <AvatarGroup.Overflow count={members.length - shown.length} />
</AvatarGroup.Root>

A count of zero or less renders nothing, so total - shown needs no guard.

Size and colour#

The group pushes its resolved size and color down to every Avatar.Root inside it. An avatar's own size or color still wins. This is the Lynx spelling of the web recipe's composes, which has no class form on this target.

The overlap#

Lynx has no :first-child, so the group tracks its avatars in mount order and stamps every one after the first stacked (zx-m-stacked, data-mod-stacked). The skin pulls those over their neighbour. An avatar mounted later, such as a conditional one, joins the end of that order wherever it sits in the row.

Accessibility#

Lynx has no group role. With a label, the root is one accessible element named by it, so a reader hears "Project members" once rather than every face. Without one, each avatar and the overflow chip are read on their own.

AvatarGroup.Overflow shows +N and is announced as "N more", in words rather than a glyph a reader would spell out. label replaces those words; translate them there.

Props#

`AvatarGroup.Root`#

Prop	Type	Default	Description
`label`	`string`	—	Makes the group one accessible element with this name.
`color` / `size`	`string`	skin default	Pushed down to every avatar that sets none.
`class`	`string`	—	Extra classes, appended after the computed ones.

`AvatarGroup.Overflow`#

Prop	Type	Default	Description
`count`	`number`	—	Required. How many avatars the group leaves out. Zero or less renders nothing.
`label`	`string`	`"N more"`	What a reader hears instead of the visible `+N`.
`class`	`string`	—	Extra classes.

Anatomy on Lynx#

Part	Element	Notes
`root`	`view`	Carries the axes. One accessible element when labelled.
`overflow`	`view` holding a `<text>`	Shows `+N`. Not rendered for a count of zero or less.

The avatars inside are ordinary Avatar parts.