@itwin/itwinui-react/esm/core/AvatarGroup/AvatarGroup.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type AvatarGroupProps = {
    /**
     * Max number of avatars unstacked.
     * @default 5
     */
    maxIcons?: number;
    /**
     * If true, group will be stacked to take less space.
     * @default true
     */
    stacked?: boolean;
    /**
     * If true, group will be animated on hover.
     * @default false
     */
    animated?: boolean;
    /**
     * Size of avatars and count avatars.
     * @default 'small'
     */
    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
    /**
     * Avatars in the group.
     */
    children: React.ReactNode;
    /**
     * Count Avatar props.
     */
    countIconProps?: React.ComponentPropsWithRef<'div'>;
};
/**
 * Group Avatars together.
 *
 * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
 * this component will show 5 Avatars and Count Avatar with "3" in it.
 *
 * You can add custom Count Avatar behavior by using `countAvatarProps`.
 *
 * @example
 * <AvatarGroup iconSize='medium'>
 *  <Avatar
 *    abbreviation="TR"
 *    backgroundColor={getUserColor("Terry Rivers")}
 *  />
 *  <Avatar
 *    abbreviation="RM"
 *    backgroundColor={getUserColor("Robin Mercer")}
 *  />
 *  <Avatar
 *    abbreviation="JM"
 *    backgroundColor={getUserColor("Jean Mullins")}
 *  />
 * </AvatarGroup>
 */
export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
export {};