AvatarGroup

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

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.

Props

ReactNode[]

required

Avatar elements in display order. Only the first maxVisible elements are shown.

string

Class applied to the group container.

number

default:"4"

Maximum number of supplied avatars to show.

ReactNode

Custom trailing element, used instead of the numeric overflow indicator.

number

default:"0"

Number shown in the trailing +N indicator. Compute this in the application; it is not derived from avatars.

"circle" | "rounded-square" | "square"

default:"square"

Shape of the numeric overflow indicator.

"left" | "right"

default:"right"

Physical margin, left or right, that carries the negative overlap offset. Later avatars always render above earlier ones.

string

default:"3px"

CSS length of the overlap between avatars.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props