Skip to main content

AvatarGroup

The Avatar component can be used as a visual representation of multiple users.

Import​

import { AvatarGroup } from '@dynatrace/strato-components-preview/content';

Use cases​

The AvatarGroup is a wrapper that stacks multiple Avatars together.

CodeSandbox

Add multiple items​

The AvatarGroup can display a maximum of 5 AvatarItems. If it contains more than that, the remaining items are collapsed into a menu. The trigger icon shows the number of menu items.

CodeSandbox

The AvatarGroup.Item is polymorphic, so you can, for example, polymorph it to an anchor.

CodeSandbox

Accessibility​

You can navigate between AvatarGroup.Items, as well as the menu trigger, with the left and right arrow keys. A roving focus index is used, so the focus moves when you use the arrow keys. This means you can tab outside the AvatarGroup, and if you tab back inside the group, the focus is set on the item you previously navigated to.

PropTable​

AvatarGroupProps

Signature:

export declare type AvatarGroupProps = & & & ;

AvatarGroup.Item​

You can use the AvatarGroup.Item component to render an item belonging to the group of Avatars, as shown above.

AvatarGroupItemProps

Signature:

export declare type AvatarGroupItemProps<E extends .> = <E, >;
Still have questions?
Find answers in the Dynatrace Community