All components (204)

Avatar group

Surfaces · AvatarGroup · .amset-avatars

What it is and when to use it

Several stacked avatars, with a "+N" at the end for those that do not fit. It is a real list, and the "+N" says who the hidden ones are: a bare "+3" does not inform.

When to use it

Who is in something: a project team, the attendees of an appointment, who has seen a document.
people is the list, each person with their name (and src if there is a photo). max decides how many are shown before the "+N" (4 by default). At least one is always shown.
size, shape and variant are those of Avatar and apply to all of them.

When not to

A single person: Avatar.
When people have to be chosen or distributed (assign, remove): SelectableList or TransferList, with the names written out. The group only shows.

Keyboard: it is neither focusable nor interactive.

Accessibility: it is a ul with a name (label, required) and one li per avatar, announced with the person's name. The "+N" is read with the missing names: "and 2 more: Jorge Peña, Sara Lima".

Fine-tuning: the Avatar variables (--amset-avatar-size, --amset-avatar-text, --amset-avatar-ring…) and --amset-avatars-overlap, how much they overlap: 0.5rem (0.375rem in xs; 0.75rem in lg and xl). The ring, in the color of the surface, is what separates them: if the group sits on another background, change --amset-avatar-ring.

What it looks like

<AvatarGroup
  label="Project team"
  people={[
    { key: 'ada', name: 'Ada Lovelace' },
    { key: 'grace', name: 'Grace Hopper' },
  ]}
/>

Props

Import it with import { AvatarGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What is being listed: "Project team", "Attendees". Required.
`people`required	`readonly AvatarPerson[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`max`	`number`	How many are shown before the "+N".
`shape`	`AvatarShape`	—
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	—
`variant`	`AvatarVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-avatars-overlap`	`0.5rem`

How to change it

.amset-avatars {
  --amset-avatars-overlap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: