AvatarGroup

Navigation

여러 아바타를 겹쳐 표시하는 그룹 컨테이너.

Usage

여러 아바타를 겹쳐 인원을 요약(참여자·담당자 목록)

import

import { AvatarGroup } from '@mildang/design-system/Avatar';

API Reference

AvatarGroup Props

Prop

Type

Default

children

필수

ReactNode

지정 안 함

max

number

지정 안 함

size

"sm" | "md"

SystemStyleObject

지정 안 함

같은 패밀리

@mildang/design-system/Avatar 에서 같이 내보내는 컴포넌트다.

Avatar

사용자나 대상을 나타내는 아바타.

예제

기본 사용

참여자 다섯 명을 겹쳐 보여주고 넘치는 인원은 max 로 +N 배지에 접습니다.

코드

Open in Playground

import { AvatarGroup, type AvatarGroupProps } from '@mildang/design-system/Avatar';
import { Avatar } from '@mildang/design-system/Avatar';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    size: 'md',
  }) } as AvatarGroupProps;

const AvatarGroupDefaultExampleRender = (args: AvatarGroupProps) => (
    <AvatarGroup {...args}>
      <Avatar initial="김민지" />
      <Avatar initial="이수현" />
      <Avatar initial="박지은" />
    </AvatarGroup>
  );

export default function AvatarGroupDefaultExample(props: Partial<AvatarGroupProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as AvatarGroupProps;
  return AvatarGroupDefaultExampleRender(mergedProps);
}

크기

size 는 그룹에서 한 번만 지정하고 자식이 상속받습니다 — 자식마다 따로 주면 겹침 간격이 어긋납니다.

코드

Open in Playground

import { AvatarGroup } from '@mildang/design-system/Avatar';
import { Avatar } from '@mildang/design-system/Avatar';

const AvatarGroupSizesExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {(['sm', 'md'] as const).map((size) => (
        <div key={size}>
          <p style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>{size}</p>
          <AvatarGroup size={size} max={3}>
            <Avatar initial="김민지" />
            <Avatar initial="이수현" />
            <Avatar initial="박지은" />
            <Avatar initial="최영수" />
            <Avatar initial="정지훈" />
          </AvatarGroup>
        </div>
      ))}
    </div>
  );

export default AvatarGroupSizesExample;

WithOverflow

코드

Open in Playground

import { AvatarGroup, type AvatarGroupProps } from '@mildang/design-system/Avatar';
import { Avatar } from '@mildang/design-system/Avatar';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    size: 'md',
    max: 3,
  }) } as AvatarGroupProps;

const AvatarGroupWithOverflowExampleRender = (args: AvatarGroupProps) => (
    <AvatarGroup {...args}>
      <Avatar initial="김민지" />
      <Avatar initial="이수현" />
      <Avatar initial="박지은" />
      <Avatar initial="최영수" />
      <Avatar initial="정지훈" />
      <Avatar initial="한서연" />
    </AvatarGroup>
  );

export default function AvatarGroupWithOverflowExample(props: Partial<AvatarGroupProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as AvatarGroupProps;
  return AvatarGroupWithOverflowExampleRender(mergedProps);
}

WithImages

코드

Open in Playground

import { AvatarGroup } from '@mildang/design-system/Avatar';
import { Avatar } from '@mildang/design-system/Avatar';

const AvatarGroupWithImagesExample = () => (
    <AvatarGroup size="md" max={4}>
      <Avatar src="https://picsum.photos/seed/avatar1/150/150" initial="김민지" />
      <Avatar src="https://picsum.photos/seed/avatar2/150/150" initial="이수현" />
      <Avatar initial="박지은" />
      <Avatar initial="최영수" />
      <Avatar initial="정지훈" />
    </AvatarGroup>
  );

export default AvatarGroupWithImagesExample;