AvatarGroup·component·@astryxdesign/core

Avatar Group Overflow

Overflow indicator for AvatarGroup. Shows a compact count for hidden avatars and can render custom count text or act as a button.

Open in Playground @astryxdesign/core/AvatarGroup

Showcases and examples

3 documented examples

Avatar Group Overflow

Overflow indicators for hidden avatars, including the default +N label and custom count text.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · avatar-group-overflow-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';

import {Avatar} from '@astryxdesign/core/Avatar';
import {AvatarGroup, AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const USERS = [
  {
    name: 'Alex Daniels',
  },
  {
    name: 'Ann Smith',
  },
  {
    name: 'Carol Davis',
  },
];

export default function AvatarGroupOverflowShowcase() {
  return (
    <Stack direction="vertical" gap={8}>
      <Stack direction="vertical" gap={3}>
        <Text type="supporting" color="secondary">
          Default overflow
        </Text>
        <AvatarGroup size="lg">
          {USERS.map(user => (
            <Avatar key={user.name} name={user.name} />
          ))}
          <AvatarGroupOverflow count={5} />
        </AvatarGroup>
      </Stack>
      <Stack direction="vertical" gap={3}>
        <Text type="supporting" color="secondary">
          Custom count text
        </Text>
        <AvatarGroup size="lg">
          {USERS.slice(0, 2).map(user => (
            <Avatar key={user.name} name={user.name} />
          ))}
          <AvatarGroupOverflow count={12}>12+</AvatarGroupOverflow>
        </AvatarGroup>
      </Stack>
    </Stack>
  );
}

Usage

AvatarGroupOverflow appears at the end of an AvatarGroup to summarize people who are not shown individually. Use it when a group is sliced to a small number of visible avatars but the hidden count still matters.

Pass the real hidden count to count so the accessible label matches the visible indicator.
Use short custom text such as +12 or 99+. The indicator is circular for short counts and grows into a pill for wider counts so the number always fits.
Provide onClick when the overflow opens a member list, popover, or detail view.
Do not pass custom text that disagrees with count; count continues to provide the accessible label.
Do not use long labels inside the indicator; place longer participant details next to the group instead.

Typed props

Prop	Type and behavior
`count`	`number` · required The number of hidden avatars. Used for the default `+N` label and the accessible label.
`children`	`ReactNode` Optional custom count text rendered inside the indicator. Omit to use the default `+N` label.
`onClick`	`() => void` Callback fired when the overflow indicator is clicked. When provided, the indicator renders as a focusable button.
`ref`	`React.Ref<HTMLElement>` Ref forwarded to the overflow indicator element.
`xstyle`	`StyleXStyles` stylex.create() value — not an inline style object.

Anatomy

Count label · required

The compact +N or custom count text displayed inside the circular indicator.

Button behavior · optional

When onClick is provided, the indicator becomes an interactive button with focus and hover states.