Avatar

사용자 또는 기업, 학교를 나타내는 대표 이미지 또는 아이콘입니다. 다양한 크기와 모양 옵션을 제공하여 프로필, 댓글, 목록 등 맥락에 맞춰 시각적으로 일관되게 표시할 수 있도록 돕습니다.

Design

Web

iOS

Android

Basic avatars

사용자를 시각적으로 표현할 때 사용합니다.

import { Avatar, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px">
      <Avatar variant="person" size="medium" />
      <Avatar variant="company" size="medium" />
      <Avatar variant="academy" size="medium" />
    </FlexBox>
  );
}

export default Demo;

Image avatars

src 옵션을 사용하여 이미지로 표시할 수 있습니다.

import { Avatar, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px">
      <Avatar variant="person" size="medium" src="https://static.wanted.co.kr/oneid-user/2kcR2ULXRgEC7Rgk5psLTK/BwWtS7ZW8ryS2dpQrAW8Cr.png" alt="User avatar" />
      <Avatar variant="company" size="medium" src="https://static.wanted.co.kr/images/wdes/0_4.54699760.png" alt="Wanted company" />
      <Avatar variant="academy" size="medium" src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCYoCP%2FbtrSeivmaxD%2Fe7JaOZVPI3Je55nAJaHDMK%2Fimg.png" alt="Wanted academy" />
    </FlexBox>
  );
}

export default Demo;

Custom avatars

children 을 통해 아이콘 또는 텍스트로 표시할 수 있습니다.

import { Avatar, FlexBox } from '@montage-ui/core';

import { IconFolderFill, IconClockFill } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox gap="12px">
      <Avatar
        size="medium"
        sx={theme => ({
          backgroundColor: theme.semantic.surface.neutral.strong,
          color: theme.semantic.static.white,
          ['[data-role="avatar-fallback"]']: {
            display: 'none',
          },
        })}
      >
        <IconFolderFill />
      </Avatar>
      <Avatar
        size="medium"
        sx={theme => ({
          backgroundColor: theme.semantic.surface.brand.primary,
          color: theme.semantic.static.white,
          ['[data-role="avatar-fallback"]']: {
            display: 'none',
          },
        })}
      >
        <IconClockFill />
      </Avatar>
      <Avatar
        size="medium"
        sx={theme => ({
          backgroundColor: theme.semantic.background.neutral.primary,
          color: theme.semantic.foreground.neutral.secondary,
          ['[data-role="avatar-fallback"]']: {
            display: 'none',
          },
        })}
      >
        S
      </Avatar>
    </FlexBox>
  );
}

export default Demo;

Sizes

size 옵션을 통해 아바타의 크기를 조정할 수 있습니다.

xsmall
small
medium
large
xlarge
custom (4배수 크기로 사용합니다.)

import { Avatar, FlexBox } from '@montage-ui/core';

import { IconFolderFill, IconHomeFill, IconClockFill } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexWrap="wrap" alignItems="center">
      <Avatar size="xsmall" />
      <Avatar size="small" />
      <Avatar size="medium" />
      <Avatar size="large" />
      <Avatar size="xlarge" />
      <Avatar size={60} />
    </FlexBox>
  );
}

export default Demo;

Button avatars

AvatarButton 컴포넌트를 사용하여 아바타를 버튼으로 표시할 수 있습니다.

import { Avatar, AvatarButton, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px">
      <AvatarButton>
        <Avatar variant="person" size="medium" />
      </AvatarButton>
      <AvatarButton>
        <Avatar variant="company" size="medium" />
      </AvatarButton>
      <AvatarButton>
        <Avatar variant="academy" size="medium" />
      </AvatarButton>
    </FlexBox>
  );
}

export default Demo;

With push badge

PushBadge 컴포넌트와 함께 사용하여 뱃지를 표시할 수 있습니다.

outlineBorder 를 활성화 하는 것을 권장합니다.
Avatar 크기에 따라 Push badge 의 크기를 조정하여 사용합니다.

Xsmall avatar

Small avatar

Medium avatar

Large avatar

Xlarge avatar

Button avatar

import { Avatar, AvatarButton, PushBadge, FlexBox, Typography } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading">Xsmall avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="person" size="xsmall" />
          </PushBadge>
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="company" size="xsmall" />
          </PushBadge>
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="academy" size="xsmall" />
          </PushBadge>
        </FlexBox>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading">Small avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="person" size="small" />
          </PushBadge>
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="company" size="small" />
          </PushBadge>
          <PushBadge size="xsmall" outlineBorder>
            <Avatar variant="academy" size="small" />
          </PushBadge>
        </FlexBox>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading">Medium avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <PushBadge size="small" outlineBorder>
            <Avatar variant="person" size="medium" />
          </PushBadge>
          <PushBadge size="small" outlineBorder>
            <Avatar variant="company" size="medium" />
          </PushBadge>
          <PushBadge size="small" outlineBorder>
            <Avatar variant="academy" size="medium" />
          </PushBadge>
        </FlexBox>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading">Large avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <PushBadge size="small" outlineBorder>
            <Avatar variant="person" size="large" />
          </PushBadge>
          <PushBadge size="small" outlineBorder>
            <Avatar variant="company" size="large" />
          </PushBadge>
          <PushBadge size="small" outlineBorder>
            <Avatar variant="academy" size="large" />
          </PushBadge>
        </FlexBox>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading">Xlarge avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <PushBadge size="medium" outlineBorder>
            <Avatar variant="person" size="xlarge" />
          </PushBadge>
          <PushBadge size="medium" outlineBorder>
            <Avatar variant="company" size="xlarge" />
          </PushBadge>
          <PushBadge size="medium" outlineBorder>
            <Avatar variant="academy" size="xlarge" />
          </PushBadge>
        </FlexBox>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" sx={{ marginTop: '20px' }}>
        <Typography variant="body2-reading">Button avatar</Typography>
        <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
          <AvatarButton>
            <PushBadge size="medium" outlineBorder>
              <Avatar variant="person" size="medium" />
            </PushBadge>
          </AvatarButton>
          <AvatarButton>
            <PushBadge size="medium" outlineBorder>
              <Avatar variant="company" size="medium" />
            </PushBadge>
          </AvatarButton>
          <AvatarButton>
            <PushBadge size="medium" outlineBorder>
              <Avatar variant="academy" size="medium" />
            </PushBadge>
          </AvatarButton>
        </FlexBox>
      </FlexBox>
    </FlexBox>
  );
}

export default Demo;

API

Avatar

정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.

size

Name	Types	defaultValue
`size`	`number \| "small" \| "medium" \| "large" \| "xsmall" \| "xlarge"`	`-`
`variant`	`"person" \| "company" \| "academy"`	`"person"`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<AvatarDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<AvatarDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<AvatarDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<AvatarDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<AvatarDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`onLoad`	`() => void`	`-`
`onError`	`() => void`	`-`
`onAbort`	`() => void`	`-`
`src`	`string`	`-`
`srcSet`	`string`	`-`
`alt`	`string`	`-`
`referrerPolicy`	`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`	`-`
`crossOrigin`	`"" \| "anonymous" \| "use-credentials"`	`-`

AvatarButton

as 옵션을 통해 Link 등 다른 컴포넌트/태그로 활용할 수 있습니다.

Name	Types	defaultValue
`as`	`ElementType`	`-`
`disabled`	`boolean`	`-`
`disableInteraction`	`boolean`	`false`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`