> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AvatarGroup

> Overlapping avatars with an optional overflow indicator.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`AvatarGroup` receives rendered avatars. Supply `overflowCount` yourself; slicing the avatars does not calculate the hidden count. `overflowAvatar` replaces the numeric indicator.

```tsx theme={null}
import { AvatarGroup } from 'twenty-ui/components';
import { Avatar } from 'twenty-ui/primitives/data-display';

export const TeamAvatars = () => (
  <AvatarGroup
    maxVisible={2}
    overflowCount={1}
    avatars={[
      <Avatar key="ada" name="Ada Lovelace" />,
      <Avatar key="grace" name="Grace Hopper" />,
      <Avatar key="margaret" name="Margaret Hamilton" />,
    ]}
  />
);
```

Keep the member names available in surrounding content. Later avatars always render above earlier ones. `overlap` only picks the physical margin, `left` or `right`, that carries the negative offset, and `overlapOffset` sets that offset as a CSS length. An empty group without an overflow element renders nothing.

<StoryEmbed storyId="ui-data-display-avatargroup--default" title="AvatarGroup example" height={280} />

## Props

<ParamField body="avatars" type="ReactNode[]" required>
  Avatar elements in display order. Only the first maxVisible elements are shown.
</ParamField>

<ParamField body="className" type="string">
  Class applied to the group container.
</ParamField>

<ParamField body="maxVisible" type="number" default="4">
  Maximum number of supplied avatars to show.
</ParamField>

<ParamField body="overflowAvatar" type="ReactNode">
  Custom trailing element, used instead of the numeric overflow indicator.
</ParamField>

<ParamField body="overflowCount" type="number" default="0">
  Number shown in the trailing +N indicator. Compute this in the application; it is not derived from avatars.
</ParamField>

<ParamField body="overflowShape" type="&#x22;circle&#x22; | &#x22;rounded-square&#x22; | &#x22;square&#x22;" default="square">
  Shape of the numeric overflow indicator.
</ParamField>

<ParamField body="overlap" type="&#x22;left&#x22; | &#x22;right&#x22;" default="right">
  Physical margin, left or right, that carries the negative overlap offset. Later avatars always render above earlier ones.
</ParamField>

<ParamField body="overlapOffset" type="string" default="3px">
  CSS length of the overlap between avatars.
</ParamField>