// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import AvatarsIcon from 'src/views/components/avatars/AvatarsIcon' import AvatarsImage from 'src/views/components/avatars/AvatarsImage' import AvatarsSizes from 'src/views/components/avatars/AvatarsSizes' import AvatarsLetter from 'src/views/components/avatars/AvatarsLetter' import AvatarsGrouped from 'src/views/components/avatars/AvatarsGrouped' import AvatarsVariants from 'src/views/components/avatars/AvatarsVariants' import AvatarsWithBadge from 'src/views/components/avatars/AvatarsWithBadge' import AvatarsGroupedPullUp from 'src/views/components/avatars/AvatarsGroupedPullUp' import AvatarsGroupedPullUpWithTooltip from 'src/views/components/avatars/AvatarsGroupedPullUpWithTooltip' // ** Source code imports import * as source from 'src/views/components/avatars/AvatarsSourceCode' const Avatars = () => { return ( Use src and alt props with Avatar component for basic image avatar. Write some letters inside Avatar component to have letter avatar. Use our custom component for colored avatar and use skin='light' prop for light variant with opacity and{' '} skin='light-static' prop for light variant without opacity. You can set any size of an avatar using styled hook. Pass an icon as a child of Avatar component to make an icon avatar. Use variant={`{'square' | 'rounded'}`} prop with Avatar component for different variants. Use Avatar component as a child of Badge component. Use class pull-up with AvatarGroup component for pull-up effect on hover of the avatar. Use class pull-up with AvatarGroup component and wrap your Avatar{' '} with Tooltip for pull-up effect & tooltip on hover of the avatar. Wrap all your avatars with AvatarGroup component to have grouped avatars. Use max{' '} prop with AvatarGroup component to restrict maximum number of avatars shown. ) } export default Avatars