Avatar

Avatar

Avatar(아바타)는 표에서 다이얼로그 메뉴에 이르기까지 material design 전반에서 다양하게 사용돼요.

출처: 문서

본문

이미지 아바타 (Image avatars)

표준 img props인 src 또는 srcSet을 컴포넌트에 전달해서 이미지 아바타를 만들 수 있어요.

import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';

export default function ImageAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
    </Stack>
  );
}

문자 아바타 (Letter avatars)

children으로 문자열을 전달하면 간단한 문자를 담은 아바타를 만들 수 있어요.

import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import { deepOrange, deepPurple } from '@mui/material/colors';

export default function LetterAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar>H</Avatar>
      <Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
      <Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>
    </Stack>
  );
}

아바타에 다른 배경색을 사용할 수 있어요. 다음 데모는 사람의 이름에 기반해 색상을 생성해요.

import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';

function stringToColor(string: string) {
  let hash = 0;
  let i;

  /* eslint-disable no-bitwise */
  for (i = 0; i < string.length; i += 1) {
    hash = string.charCodeAt(i) + ((hash << 5) - hash);
  }

  let color = '#';

  for (i = 0; i < 3; i += 1) {
    const value = (hash >> (i * 8)) & 0xff;
    color += `00${value.toString(16)}`.slice(-2);
  }
  /* eslint-enable no-bitwise */

  return color;
}

function stringAvatar(name: string) {
  return {
    sx: {
      bgcolor: stringToColor(name),
    },
    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
  };
}

export default function BackgroundLetterAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar {...stringAvatar('Kent Dodds')} />
      <Avatar {...stringAvatar('Jed Watson')} />
      <Avatar {...stringAvatar('Tim Neutkens')} />
    </Stack>
  );
}

크기 (Sizes)

height와 width CSS 속성으로 아바타의 크기를 바꿀 수 있어요.

import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';

export default function SizeAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar
        alt="Remy Sharp"
        src="/static/images/avatar/1.jpg"
        sx={{ width: 24, height: 24 }}
      />
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar
        alt="Remy Sharp"
        src="/static/images/avatar/1.jpg"
        sx={{ width: 56, height: 56 }}
      />
    </Stack>
  );
}

아이콘 아바타 (Icon avatars)

children으로 아이콘을 전달하면 아이콘 아바타를 만들 수 있어요.

import { green, pink } from '@mui/material/colors';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import FolderIcon from '@mui/icons-material/Folder';
import PageviewIcon from '@mui/icons-material/Pageview';
import AssignmentIcon from '@mui/icons-material/Assignment';

export default function IconAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar>
        <FolderIcon />
      </Avatar>
      <Avatar sx={{ bgcolor: pink[500] }}>
        <PageviewIcon />
      </Avatar>
      <Avatar sx={{ bgcolor: green[500] }}>
        <AssignmentIcon />
      </Avatar>
    </Stack>
  );
}

변형 (Variants)

정사각형이나 둥근 아바타가 필요하다면 variant prop을 사용해요.

import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import { deepOrange, green } from '@mui/material/colors';
import AssignmentIcon from '@mui/icons-material/Assignment';

export default function VariantAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
        N
      </Avatar>
      <Avatar sx={{ bgcolor: green[500] }} variant="rounded">
        <AssignmentIcon />
      </Avatar>
    </Stack>
  );
}

대체 콘텐츠 (Fallbacks)

아바타 이미지 로딩에 오류가 있으면, 컴포넌트는 다음 순서로 대체 콘텐츠로 폴백해요:

  • 제공된 children
  • alt 텍스트의 첫 글자
  • 일반적인 아바타 아이콘
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import { deepOrange } from '@mui/material/colors';

export default function FallbackAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <Avatar
        sx={{ bgcolor: deepOrange[500] }}
        alt="Remy Sharp"
        src="/broken-image.jpg"
      >
        B
      </Avatar>
      <Avatar
        sx={{ bgcolor: deepOrange[500] }}
        alt="Remy Sharp"
        src="/broken-image.jpg"
      />
      <Avatar src="/broken-image.jpg" />
    </Stack>
  );
}

그룹 (Grouped)

AvatarGroup은 children을 스택으로 렌더링해요. max prop으로 아바타 수를 제한할 수 있어요.

import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';

export default function GroupAvatars() {
  return (
    <AvatarGroup max={4}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
      <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
    </AvatarGroup>
  );
}

전체 아바타 수 (Total avatars)

표시되지 않는 아바타의 전체 수를 제어해야 한다면 total prop을 사용할 수 있어요.

import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';

export default function TotalAvatars() {
  return (
    <AvatarGroup total={24}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
      <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
    </AvatarGroup>
  );
}

커스텀 초과분 (Custom surplus)

renderSurplus prop을 콜백으로 설정해서 초과분(surplus) 아바타를 커스터마이즈해요. 콜백은 children과 max prop에 기반한 초과분 숫자를 인자로 받고, React.ReactNode를 반환해야 해요.

renderSurplus prop은 서버에서 보낸 데이터에 기반해 초과분을 렌더링해야 할 때 유용해요.

import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';

export default function CustomSurplusAvatars() {
  return (
    <AvatarGroup
      renderSurplus={(surplus) => <span>+{surplus.toString()[0]}k</span>}
      total={4251}
    >
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
      <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
    </AvatarGroup>
  );
}

간격 (Spacing)

spacing prop으로 아바타 사이의 간격을 바꿀 수 있어요. 프리셋("medium", 기본값, 또는 "small") 중 하나를 사용하거나 커스텀 숫자 값을 설정할 수 있어요.

import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import Stack from '@mui/material/Stack';

export default function Spacing() {
  return (
    <Stack spacing={4}>
      <AvatarGroup spacing="medium">
        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      </AvatarGroup>
      <AvatarGroup spacing="small">
        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      </AvatarGroup>
      <AvatarGroup spacing={24}>
        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      </AvatarGroup>
    </Stack>
  );
}

배지와 함께 (With badge)

import { styled } from '@mui/material/styles';
import Badge from '@mui/material/Badge';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';

const StyledBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    backgroundColor: '#44b700',
    color: '#44b700',
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    '&::after': {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      animation: 'ripple 1.2s infinite ease-in-out',
      border: '1px solid currentColor',
      content: '""',
    },
  },
  '@keyframes ripple': {
    '0%': {
      transform: 'scale(.8)',
      opacity: 1,
    },
    '100%': {
      transform: 'scale(2.4)',
      opacity: 0,
    },
  },
}));

const SmallAvatar = styled(Avatar)(({ theme }) => ({
  width: 22,
  height: 22,
  border: `2px solid ${theme.palette.background.paper}`,
}));

export default function BadgeAvatars() {
  return (
    <Stack direction="row" spacing={2}>
      <StyledBadge
        overlap="circular"
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        variant="dot"
      >
        <Avatar alt="Remy Sharp, online" src="/static/images/avatar/1.jpg" />
      </StyledBadge>
      <Badge
        overlap="circular"
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        badgeContent={2}
        color="primary"
      >
        <Avatar
          alt="Travis Howard, 2 unread messages"
          src="/static/images/avatar/2.jpg"
        />
      </Badge>
      <Badge
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        badgeContent={<SmallAvatar alt="" src="/static/images/avatar/1.jpg" />}
      >
        <InsertDriveFileIcon
          color="action"
          fontSize="large"
          titleAccess="Q4 budget spreadsheet, last edited by Remy Sharp"
        />
      </Badge>
    </Stack>
  );
}

아바타 업로드 (Avatar upload)

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import ButtonBase from '@mui/material/ButtonBase';

export default function UploadAvatars() {
  const [avatarSrc, setAvatarSrc] = React.useState<string | undefined>(undefined);

  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // Read the file as a data URL
      const reader = new FileReader();
      reader.onload = () => {
        setAvatarSrc(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <ButtonBase
      component="label"
      role={undefined}
      tabIndex={-1} // prevent label from tab focus
      aria-label="Avatar image"
      sx={{
        borderRadius: '40px',
        '&:has(:focus-visible)': {
          outline: '2px solid',
          outlineOffset: '2px',
        },
      }}
    >
      <Avatar alt="Upload new avatar" src={avatarSrc} />
      <input
        type="file"
        accept="image/*"
        style={{
          border: 0,
          clipPath: 'inset(50%)',
          height: '1px',
          margin: '-1px',
          overflow: 'hidden',
          padding: 0,
          position: 'absolute',
          whiteSpace: 'nowrap',
          width: '1px',
        }}
        onChange={handleAvatarChange}
      />
    </ButtonBase>
  );
}

Avatar API

데모 (Demos)

이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:

Import

import Avatar from '@mui/material/Avatar';
// or
import { Avatar } from '@mui/material';

Props

Name Type Default Required Description
alt string - No
children node - No
classes object - No 컴포넌트에 적용되는 스타일을 오버라이드하거나 확장해요.
component elementType - No
sizes string - No
slotProps { fallback?: func | object, img?: func | object, root?: func | object } {} No
slots { fallback?: elementType, img?: elementType, root?: elementType } {} No
src string - No
srcSet string - No
sx Array<func | object | bool> | func | object - No 시스템 오버라이드 및 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop이에요.
variant 'circular' | 'rounded' | 'square' | string 'circular' No

Note: ref는 루트 요소(HTMLDivElement)로 전달돼요.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달돼요.

테마 기본 props (Theme default props)

MuiAvatar를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

Slots

Name Default Class Description
root 'div' .MuiAvatar-root 루트 슬롯을 렌더링하는 컴포넌트예요.
img 'img' .MuiAvatar-img img 슬롯을 렌더링하는 컴포넌트예요.
fallback Person icon .MuiAvatar-fallback 대체 슬롯을 렌더링하는 컴포넌트예요.

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- circular variant="circular"일 때 루트 요소에 적용되는 스타일이에요.
- colorDefault src 또는 srcSet이 없을 때 루트 요소에 적용되는 스타일이에요.
- rounded variant="rounded"일 때 루트 요소에 적용되는 스타일이에요.
- square variant="square"일 때 루트 요소에 적용되는 스타일이에요.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.

AvatarGroup API

데모 (Demos)

이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:

Import

import AvatarGroup from '@mui/material/AvatarGroup';
// or
import { AvatarGroup } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No 컴포넌트에 적용되는 스타일을 오버라이드하거나 확장해요.
component elementType - No
max number 5 No
renderSurplus function(surplus: number) => React.ReactNode - No
slotProps { surplus?: func | object } {} No
slots { surplus?: elementType } {} No
spacing 'medium' | 'small' | number 'medium' No
sx Array<func | object | bool> | func | object - No 시스템 오버라이드 및 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop이에요.
total number children.length No
variant 'circular' | 'rounded' | 'square' | string 'circular' No

Note: ref는 루트 요소(HTMLDivElement)로 전달돼요.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달돼요.

테마 기본 props (Theme default props)

MuiAvatarGroup을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

Slots

Name Default Class Description
surplus undefined -

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- avatar 아바타 요소에 적용되는 스타일이에요.
- root 루트 요소에 적용되는 스타일이에요.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.

Badge API

데모 (Demos)

이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:

Import

import Badge from '@mui/material/Badge';
// or
import { Badge } from '@mui/material';

Props

Name Type Default Required Description
anchorOrigin { horizontal?: 'left' | 'right', vertical?: 'bottom' | 'top' } `{
vertical: 'top',
horizontal: 'right',
}` No
badgeContent node - No
children node - No
classes object - No 컴포넌트에 적용되는 스타일을 오버라이드하거나 확장해요.
color 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string 'default' No
component elementType - No
invisible bool false No
max number 99 No
overlap 'circular' | 'rectangular' 'rectangular' No
showZero bool false No
slotProps { badge?: func | object, root?: func | object } {} No
slots { badge?: elementType, root?: elementType } {} No
sx Array<func | object | bool> | func | object - No 시스템 오버라이드 및 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop이에요.
variant 'dot' | 'standard' | string 'standard' No

Note: ref는 루트 요소(HTMLSpanElement)로 전달돼요.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달돼요.

테마 기본 props (Theme default props)

MuiBadge를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

Slots

Name Default Class Description
root span .MuiBadge-root 루트를 렌더링하는 컴포넌트예요.
badge span .MuiBadge-badge 배지를 렌더링하는 컴포넌트예요.

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- anchorOriginBottomLeft anchorOrigin={{ 'bottom', 'left' }}일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginBottomLeftCircular anchorOrigin={{ 'bottom', 'left' }} overlap="circular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginBottomLeftRectangular anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginBottomRight anchorOrigin={{ 'bottom', 'right' }}일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginBottomRightCircular anchorOrigin={{ 'bottom', 'right' }} overlap="circular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginBottomRightRectangular anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopLeft anchorOrigin={{ 'top', 'left' }}일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopLeftCircular anchorOrigin={{ 'top', 'left' }} overlap="circular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopLeftRectangular anchorOrigin={{ 'top', 'left' }} overlap="rectangular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopRight anchorOrigin={{ 'top', 'right' }}일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopRightCircular anchorOrigin={{ 'top', 'right' }} overlap="circular"일 때 배지 span 요소에 적용되는 스타일이에요.
- anchorOriginTopRightRectangular anchorOrigin={{ 'top', 'right' }} overlap="rectangular"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorError color="error"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorInfo color="info"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorPrimary color="primary"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorSecondary color="secondary"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorSuccess color="success"일 때 배지 span 요소에 적용되는 스타일이에요.
- colorWarning color="warning"일 때 배지 span 요소에 적용되는 스타일이에요.
- dot variant="dot"일 때 배지 span 요소에 적용되는 스타일이에요.
- invisible invisible={true}일 때 배지 span 요소에 적용되는 상태 클래스예요.
- overlapCircular overlap="circular"일 때 배지 span 요소에 적용되는 스타일이에요.
- overlapRectangular overlap="rectangular"일 때 배지 span 요소에 적용되는 스타일이에요.
- standard variant="standard"일 때 배지 span 요소에 적용되는 스타일이에요.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.

더 알아보기 (Learn more)