import :
import Avatar from '@mui/material/Avatar';
component : Avatar Image
<Stack direction="row">
<Avatar alt="Remy Sharp " src="https://mui.com/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard " src="https://mui.com/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker " src="https://mui.com/static/images/avatar/3.jpg" />
</Stack>
component : Avatar Letter
<Stack direction="row" spacing={2} >
<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: '#f00'}}>N</Avatar>
<Avatar sx={{ bgcolor: 'var(--color-success,'}}>OP</Avatar>
</Stack>
component : Avatar Generates color
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]}`,
};
}
<Stack direction="row" spacing=2>
<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />
</Stack>
component : Avatar Size
<Stack direction="row" spacing={2} >
<Avatar
alt="Remy Sharp"
src="https://mui.com/static/images/avatar/1.jpg"
sx={{ width: 24, height: 24 }}
/>
<Avatar
alt="Remy Sharp"
src="https://mui.com/static/images/avatar/1.jpg"
/>
<Avatar
alt="Remy Sharp"
src="https://mui.com/static/images/avatar/1.jpg"
sx={{ width: 56, height: 56 }}
/>
</Stack>
component : Avatar Icon
import FolderIcon from '@mui/icons-material/Folder';
import PageviewIcon from '@mui/icons-material/Pageview';
import AssignmentIcon from '@mui/icons-material/Assignment';
<Stack direction="row" spacing={2} >
<Avatar>
<FolderIcon />
</Avatar>
<Avatar
sx={{ bgcolor: '#ff00c6' }} >
<PageviewIcon />
</Avatar>
<Avatar
sx={{ bgcolor: '#03a9f4' }} >
<AssignmentIcon />
</Avatar>
</Stack>
component : Avatar Variants
import FolderIcon from '@mui/icons-material/Folder';
import PageviewIcon from '@mui/icons-material/Pageview';
import AssignmentIcon from '@mui/icons-material/Assignment';
<Stack direction="row" spacing={2} >
<Avatar
sx={{ bgcolor: '#ff00c6' }} variant="square">
Z
</Avatar>
<Avatar
sx={{ bgcolor: '#03a9f4' }} variant="rounded">
Q
</Avatar>
</Stack>
component : Avatar Fallbacks
<Stack direction="row" spacing={2} >
<Avatar
sx={{ bgcolor: '#ff00c6' }} alt="
Remy Sharp" src="
/broken-image.jpg" >
Z
</Avatar>
<Avatar
sx={{ bgcolor: '#03a9f4' }}
alt="Remy Sharp"
src="/broken-image.jpg"
/>
<Avatar
sx={{ bgcolor: '#ff9800' }}
src="/broken-image.jpg"
/>
</Stack>
component : Avatar With badge
import { styled } from '@mui/material/styles';
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,
},
}
});
<Stack direction="row" spacing={2}>
<StyledBadge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot"
>
<Avatar alt="Remy Sharp" src="https://mui.com/static/images/avatar/1.jpg" />
</StyledBadge>
</Stack>
import Badge from '@mui/material/Badge';
const
SmallAvatar =
styled(
Avatar)((
{ theme }) => ({
width : '22',
height : '22',
border : ' 2px solid ${theme.palette.background.paper} ',
}));
<Stack direction="row" spacing={2}>
<Badge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
badgeContent={<SmallAvatar alt="Remy Sharp" src="https://mui.com/static/images/avatar/1.jpg"/> }
>
<Avatar alt="Travis Howard" src="https://mui.com/static/images/avatar/2.jpg" />
</Badge>
</Stack>
