Avatar Group

Last updated: 2.1.0 (30/01/2024) | Added: 2.1.0

The Avatar Group is a wrapper component designed specifically for creating a group of Avatar components.

The Avatar Group accepts most props that the Avatar does (except src and alt), and will set those props as the props for the children Avatars.

Usage

import { AvatarGroup, Avatar } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <AvatarGroup>
            <Avatar
                src="Avatar url..."
                alt="A nice avatar!"
            />
            <Avatar
                src="Avatar url..."
                alt="A nice avatar!"
            />
        </AvatarGroup>
    )
}

The spacing between Avatars in the group can be adjusted with the gap property. By default, the Avatar Group will bunch its children together.

---

Props

Extends AvatarProps.

Property	Type	Description
gap	number	The space between avatars.
children (required)	ReactNode