Layout & navigation

AppAvatarGroup

A row of overlapping avatars — a team, the people on a project — with an optional “+N”.

<app-avatar-group><app-avatar name="…" />…</app-avatar-group>

When several people belong to one thing — a project, a document, a shift — <app-avatar-group> overlaps their <app-avatar>s into a single compact row, each ringed so it reads against its neighbour. Cap the row with a “+N” chip when the list is longer than you want to show.

It's composition, not data: you write the avatars yourself, so each keeps its own size, tone and status. Its look comes entirely from @webority/theme, so the Razor <app-avatar-group> and the React <AppAvatarGroup> render identically.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the row above it.

<app-avatar-group>
    <app-avatar name="Jane Doe" tone="auto" />
    <app-avatar name="Ravi Kumar" tone="auto" />
    <app-avatar name="Mia Chen" tone="auto" />
</app-avatar-group>

A row of people

Nest app-avatars inside the group; they overlap into one identity row.

Overlapping avatars
Each avatar carries its own tone — here auto, for distinct per-person colours.
Show code 
<app-avatar-group>
    <app-avatar name="Jane Doe" tone="auto" />
    <app-avatar name="Ravi Kumar" tone="auto" />
    <app-avatar name="Mia Chen" tone="auto" />
</app-avatar-group>

Capping with “+N”

Show the first few and summarise the rest with an overflow count — you supply the hidden number.

Three shown, plus a count
+2
Show code 
<app-avatar-group overflow="2">
    <app-avatar name="Jane Doe" tone="auto" />
    …
</app-avatar-group>
You own the overflow numberThe group lays avatars out; it doesn't slice a list. Write the avatars you want shown and set overflow to the count you hid — usually total − shown.

Sizing the whole row

Give the group a size — a preset or a custom pixel size — and every avatar (and the “+N” chip) follows it, so you size the cluster in one place instead of on each avatar.

One size for the group
+2
+2
+2
Show code 
<app-avatar-group size="lg">
    <app-avatar name="Jane Doe" tone="auto" />
    …
</app-avatar-group>
The group size is inheritedIt sets --avatar-size on the row, which each avatar inherits — so an avatar with its own size still wins, letting you make one person larger if you need.

Spacing

How far the avatars overlap — tighter for dense tables, looser when the faces matter.

Tight, normal, loose
Show code 
<app-avatar-group spacing="tight">…</app-avatar-group>
<app-avatar-group>…</app-avatar-group>
<app-avatar-group spacing="loose">…</app-avatar-group>

When to use

Use it when

  • Several people belong to one row/card — assignees, reviewers, attendees.
  • You want a compact identity cluster instead of a long list of names.
  • A list is longer than you want to show and a “+N” summary will do.

Reach for something else when

  • You are showing a single person. → AppAvatar
  • You need a full, scannable list of people. → AppDataTable
  • The items are not people. → AppBadge / chips

Every option

The whole surface of the component, one cell per value.

size — presets, a custom pixel size, and a CSS length

size="xs"
+1
size="sm"
+1
size="md"
+1
size="lg"
+1
size="xl"
+1
size="2xl"
+1
size="72"
+1
size="3rem"
+1

spacing — tight | normal | loose

spacing="tight"
spacing="normal"
spacing="loose"

overflow — the “+N” chip

(omitted) — no chip
overflow="0" — no chip
overflow="3"
+3

child size override — a group size is inherited, not forced

size="md" group, one app-avatar with its own size="xl"

Attributes

AttributeTypeDefaultDescription
sizexs | sm | md | lg | xl | 2xl | <px>—Sizes the whole row — every avatar (and the “+N” chip) inherits it.
spacingtight | normal | loosenormalHow far the avatars overlap.
overflowint0A “+N” chip after the avatars — the hidden count. 0 renders no chip.
classstring—Extra classes on the group, merged with the component classes (React className).
(content)markup—The app-avatar children to overlap.