import * as React from 'react';
import { Avatar, AvatarGroup, Box, Typography } from '@mui/material';
export default function RoundAvatarGroup({ images = [
    'https://github.com/gillkyle.png?size=100',
    'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100',
    'https://images.unsplash.com/photo-1610069302033-6fee1f5791d2?w=100',
    'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=100',
    'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?w=100',
], }) {
    return (<Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 1,
        }}>
      <AvatarGroup max={4} spacing='small' sx={{
            '.MuiAvatar-root': {
                width: 36,
                height: 36,
                fontSize: 'sm',
                bgcolor: 'gray.300',
                boxShadow: 1,
            },
        }}>
        {images.map(image => (<Avatar key={image} src={image}/>))}
      </AvatarGroup>
      <Typography sx={{
            color: 'gray.500',
        }}>
        5 people liked this
      </Typography>
    </Box>);
}


import * as React from 'react';
import { Avatar, AvatarGroup, Box, Typography } from '@mui/material';

export default function RoundAvatarGroup({
  images = [
    'https://github.com/gillkyle.png?size=100',
    'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100',
    'https://images.unsplash.com/photo-1610069302033-6fee1f5791d2?w=100',
    'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=100',
    'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?w=100',
  ],
}: {
  images: string[];
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
      }}
    >
      <AvatarGroup
        max={4}
        spacing='small'
        sx={{
          '.MuiAvatar-root': {
            width: 36,
            height: 36,
            fontSize: 'sm',
            bgcolor: 'gray.300',
            boxShadow: 1,
          },
        }}
      >
        {images.map(image => (
          <Avatar key={image} src={image} />
        ))}
      </AvatarGroup>
      <Typography
        sx={{
          color: 'gray.500',
        }}
      >
        5 people liked this
      </Typography>
    </Box>
  );
}


import * as React from 'react';
import { Avatar, AvatarGroup, Box, Typography } from '@mui/material';
// avatar group with non circular avatars
export default function AvatarGroupSquare({ images = [
    'https://github.com/gillkyle.png?size=100',
    'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100',
    'https://images.unsplash.com/photo-1610069302033-6fee1f5791d2?w=100',
    'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=100',
    'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?w=100',
], }) {
    return (<Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 1,
        }}>
      <AvatarGroup max={4} spacing='small' sx={{
            '.MuiAvatar-root': {
                width: 36,
                height: 36,
                fontSize: 'sm',
                bgcolor: 'gray.300',
                borderRadius: 1,
                boxShadow: 1,
            },
        }}>
        {images.map(image => (<Avatar key={image} src={image}/>))}
      </AvatarGroup>
      <Typography sx={{
            color: 'gray.500',
        }}>
        5 people liked this
      </Typography>
    </Box>);
}


import * as React from 'react';
import { Avatar, AvatarGroup, Box, Typography } from '@mui/material';
// avatar group with non circular avatars
export default function AvatarGroupSquare({
  images = [
    'https://github.com/gillkyle.png?size=100',
    'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100',
    'https://images.unsplash.com/photo-1610069302033-6fee1f5791d2?w=100',
    'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=100',
    'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?w=100',
  ],
}: {
  images: string[];
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
      }}
    >
      <AvatarGroup
        max={4}
        spacing='small'
        sx={{
          '.MuiAvatar-root': {
            width: 36,
            height: 36,
            fontSize: 'sm',
            bgcolor: 'gray.300',
            borderRadius: 1,
            boxShadow: 1,
          },
        }}
      >
        {images.map(image => (
          <Avatar key={image} src={image} />
        ))}
      </AvatarGroup>
      <Typography
        sx={{
          color: 'gray.500',
        }}
      >
        5 people liked this
      </Typography>
    </Box>
  );
}


import * as React from 'react';
import { Avatar, Box, Typography } from '@mui/material';
export default function AvatarWithLabel({ label = 'Kyle Gill', description = 'UI Designer', }) {
    return (<Box sx={{
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'row',
            gap: 1,
        }}>
      <Avatar src='https://github.com/gillkyle.png?size=100'/>
      <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 0.5,
        }}>
        <Typography sx={{
            lineHeight: 1,
            fontSize: 'sm',
            fontWeight: 500,
        }}>
          {label}
        </Typography>
        <Typography sx={{
            lineHeight: 1,
            fontSize: 'xs',
            color: 'gray.500',
        }}>
          {description}
        </Typography>
      </Box>
    </Box>);
}


import * as React from 'react';
import { Avatar, Box, Typography } from '@mui/material';

export default function AvatarWithLabel({
  label = 'Kyle Gill',
  description = 'UI Designer',
}: {
  label: string;
  description?: string;
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row',
        gap: 1,
      }}
    >
      <Avatar src='https://github.com/gillkyle.png?size=100' />
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 0.5,
        }}
      >
        <Typography
          sx={{
            lineHeight: 1,
            fontSize: 'sm',
            fontWeight: 500,
          }}
        >
          {label}
        </Typography>
        <Typography
          sx={{
            lineHeight: 1,
            fontSize: 'xs',
            color: 'gray.500',
          }}
        >
          {description}
        </Typography>
      </Box>
    </Box>
  );
}


Avatars

Round group

Square group

Avatar with label

Small group with badge