Avatar

Navigation

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

Usage

사용자/엔터티를 이미지·이니셜·상태점으로 식별

import

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

API Reference

Avatar Props

Prop

Type

Default

alt

string

지정 안 함

badge

boolean

false

color

ColorToken

지정 안 함

disabled

boolean

false

fallback

ReactNode

지정 안 함

fallbackColor

ColorToken

지정 안 함

initial

ReactNode

지정 안 함

"lazy" | "eager"

lazy

size

"xs" | "sm" | "md" | "lg" | "xl"

sizes

string

지정 안 함

src

string | { src: string; }

지정 안 함

unoptimized

boolean

지정 안 함

variant

"circle" | "square"

circle

같은 패밀리

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

AvatarGroup

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

사용 가이드

권장

이미지, 이니셜, 텍스트 등으로 사용자의 정체성을 시각적으로 구분한다.
클릭해 이동해야 할 때는 Avatar 자체에 액션을 넣지 말고 IconButton이나 링크와 결합한다.

지양

AvatarGroup에서는 개별 Avatar의 badge 사용을 권장하지 않는다.

예제

Demo

코드

Open in Playground

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    size: 'sm',
  }) } as AvatarProps;

const AvatarDemoExampleRender = (args: AvatarProps) => <Avatar {...args} initial="John Doe" />;

export default function AvatarDemoExample(props: Partial<AvatarProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as AvatarProps;
  return AvatarDemoExampleRender(mergedProps);
}