Avatar Group

Compound component that displays a number of avatars grouped together in a stack.

Import

import { AvatarGroup } from '@vortex-kit/vortex';
import type { AvatarGroupProps } from '@vortex-kit/vortex';

Display

<AvatarGroup members={data} limit={4} />

Allied components

Avatar Image

Features

Supports different sizes

Controls the number of avatars displayed

Provides aria-label for accessibility

Renders as unordered list

Automatically handles alt text for avatars

Implementation

The Avatar group needs an array of objects with src and name to show the avatars. The alt text defaults to the name for accessibility, so you don't need to add an alt prop for each avatar.

If you choose to control how many avatars are displayed, you can use the limit prop to set the number of avatars to display.

Show Code

Size

Avatar group has three size options: xs, sm, md. The default size is md.

Show Code

Limit

The number of avatars that can be displayed in the group can be customized using the limit property. The limit property accepts a number.

Show Code

Squared

The squared property can be used to make the avatars have a squared shape. Default shape is rounded.

Show Code

Members

The members of the avatar group can be customized using the members property. The members property accepts an array of objects. Each object should have a src and name property.

Show Code

Accessibility

The AvatarGroup component includes necessary ARIA attributes to enhance accessibility for users.

Key	Description
⬢	AvatarGroup has aria-label="avatar group" attribute.