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>
  );
}


import * as React from 'react';
import { Avatar, Badge, Box, Typography } from '@mui/material';
// avatar group with badge for total avatars
export default function AvatarGroupBadge({ 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',
], }) {
    const firstAvatar = images[0];
    return (<Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 1,
        }}>
      <Badge color='secondary' badgeContent={images.length} anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
        }} sx={{
            '.MuiBadge-badge': {
                padding: 0.25,
                height: 'max-content',
                borderRadius: 1,
                transform: 'scale(1) translate(20%, 20%)',
                borderColor: 'background.paper',
                borderWidth: 1,
                borderStyle: 'solid',
                fontSize: 'xs',
                fontWeight: 700,
                color: 'gray.600',
                backgroundColor: 'gray.200',
            },
        }}>
        <Avatar sx={{
            width: 24,
            height: 24,
            borderRadius: 1,
        }} src={firstAvatar}/>
      </Badge>
      <Typography sx={{
            fontSize: 'sm',
        }}>
        Kyle Gill, Jamie Nguyen, Trey W...
      </Typography>
    </Box>);
}


import * as React from 'react';
import { Avatar, Badge, Box, Typography } from '@mui/material';
// avatar group with badge for total avatars
export default function AvatarGroupBadge({
  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[];
}) {
  const firstAvatar = images[0];
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
      }}
    >
      <Badge
        color='secondary'
        badgeContent={images.length}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        sx={{
          '.MuiBadge-badge': {
            padding: 0.25,
            height: 'max-content',
            borderRadius: 1,
            transform: 'scale(1) translate(20%, 20%)',
            borderColor: 'background.paper',
            borderWidth: 1,
            borderStyle: 'solid',
            fontSize: 'xs',
            fontWeight: 700,
            color: 'gray.600',
            backgroundColor: 'gray.200',
          },
        }}
      >
        <Avatar
          sx={{
            width: 24,
            height: 24,
            borderRadius: 1,
          }}
          src={firstAvatar}
        />
      </Badge>
      <Typography
        sx={{
          fontSize: 'sm',
        }}
      >
        Kyle Gill, Jamie Nguyen, Trey W...
      </Typography>
    </Box>
  );
}


Avatars

Round group

Square group

Avatar with label

Small group with badge