monday-ui-react-core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx

Official monday.com UI resources for application development in React.js

import { Meta } from "@storybook/blocks";
import { UsageGuidelines } from "vibe-storybook-components";
import { AVATAR, COUNTER, BADGE } from "../../../storybook/components/related-components/component-description-map";
import * as AvatarGroupStories from "./AvatarGroup.stories";

<Meta of={AvatarGroupStories} />

# AvatarGroup

- [Overview](#overview)
- [Props](#props)
- [Variants](#variants)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Use this component if you need to stack avatars as a group.

<Canvas of={AvatarGroupStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    <>
      Use <StorybookLink page="Popover/Tooltip">tooltip</StorybookLink> component while hovering on the counter when you
      need only to display the content
    </>,
    <>
      If clickable and navigable list is required on counter, use{" "}
      <StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> component
    </>
  ]}
/>

## Variants

### Size

Avatar Group appears in 3 sizes: Small, Medium, and Large.

<Canvas of={AvatarGroupStories.Size} />

### Color variants

You can use Light or Dark counter color to maintain visual hierarchy.

<Canvas of={AvatarGroupStories.ColorVariants} />

### Clickable vs. Hover

If avatars are clickable, they will be displayed via <StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> and user will be able to navigate each additional item.
Otherwise, avatars will be displayed in a Tooltip with no item's navigation.

<Canvas of={AvatarGroupStories.HoverVsClickable} />

### Disabled

Use when the avatar group is inactive in the specific context.

<Canvas of={AvatarGroupStories.Disabled} />

### Max avatars shown

Choose the ammount of avatars you want to show

<Canvas of={AvatarGroupStories.MaxAvatarsToDisplay} />

### Custom counter

You can pass `counterProps` to specify counter params.

<Canvas of={AvatarGroupStories.CustomCounter} />

### Grid tooltip

When tooltip text for additional avatars is not passed, extra avatars will be displayed in a grid mode.

<Canvas of={AvatarGroupStories.GridTooltip} />

### Virtualized list

Should be used only to display large amount of avatars in default counter tooltip

<Canvas of={AvatarGroupStories.VirtualizedList} />

### Counter custom tooltip content

Counter tooltip props can be specified in order to render tooltip with custom content.

<Canvas of={AvatarGroupStories.CounterCustomTooltipContent} />

## Use cases and examples

### Last seen users

<Canvas of={AvatarGroupStories.LastSeenUsers} />

### Displaying teams

<Canvas of={AvatarGroupStories.DisplayingTeams} />

## Related components

<RelatedComponents componentsNames={[AVATAR, BADGE, COUNTER]} />