Indicates the layout of the avatar group. Avatars will either be overlapped in a stack, or laid out in an even grid formation. Defaults to "stack".

Component used to render each avatar.

Typically the background color that the avatar is presented on. Accepts any color argument that the CSS border-color property accepts.

Element the overflow popup should be attached to. Defaults to "viewport".

An array of avatar prop data, that are spread onto each avatar component.

For further usage information on AvatarPropTypes, the supported props for avatar, refer to Avatar's prop documentation.

Disables tooltips.

Text to be used as aria-label for the list of avatars. Screen reader announcement with default label, which is avatar group, is list, avatar group, X items.

The label should describe the AvatarGroup's entities, for instance:

• label="team members", screen reader announcement would be list team members, X items
• label="reviewers" screen reader announcement would be list reviewers, X items

When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.

The maximum number of avatars allowed in the list. Defaults to 5 when displayed as a stack, and 11 when displayed as a grid.

Text to be used as aria-label for the more indicator. If provided, this will be used exactly as-is for the aria-label. If not provided, but an aria-label is provided via showMoreButtonProps, that will be used instead. If neither is provided, the aria-label will default to "N more people" where N is the number of people that are not visible (e.g. "5 more people").

Handle the click event on the avatar item. Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.

Take control of the click event on the more indicator. This will cancel the default dropdown behavior.

Custom overrides for the composed components.

Determines whether the 'show more' popup has shouldRenderToParent applied.

Provide additional props to the MoreButton. Example use cases: altering tab order by providing tabIndex; adding onClick behaviour without losing the default dropdown

Defines the size of the avatar. Defaults to "medium".

Note: The "xxsmall" (16px), legacy "xsmall", and "UNSAFE_xsmall" (20px) sizes that exist on Avatar are not supported here because elements such as the more indicator cannot be displayed in an accessible manner at those sizes.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.,Will set these elements when defined:

• Container element - {testId}--avatar-group
• Avatar items - {testId}--avatar-{index}
• Overflow menu button - {testId}--overflow-menu--trigger
• Overflow menu content - {testId}--overflow-menu--content

Where the tooltip should appear relative to its target. Defaults to tooltip position "bottom".