Material UI Avatar Examples with Styled-components
In the following examples you will see how to use Material-UI's Avatar component, along with its close friend AvatarGroup.
These examples are a bit different than the official documentation because we are implementing the styling overrides with styled-components rather than the standard Material-UI styling approaches.
Why styled-components? Well, Material-UI happens to be converting everything to a styled-components approach.
This means that soon, withStyles and makeStyles will be a thing of the past (as mentioned on this issue).
Now, onto Avatar examples.
Avatar Image
The standard Material-UI Avatar component takes a src prop which plugs into the Avatar's image src prop.
If an image fails to load, it falls back to the children of the component. The alt prop plugs into the image alt prop.
Avatar Letter
To render a letter inside the Avatar component, simply add the letters as children of the component. You can also pass anything else as children,
for example icons, numbers, etc. The children will only be used if an image is not loaded with the src attribute.
Avatar With Text
To render an Avatar alongside text, simply create a Flexbox component with align-items: center, and add some margin-right onto the Avatar.
Inside of your Flexbox, add a Typography component alongside the Avatar to create a label. See the above example for how we accomplish this.
Avatar Color
To change the color of the Avatar component, you will need to override the styles of the component and set the background-color. See above examples for how we accomplish this with styled-components.
Avatar Sizes
To set the size of the Avatar component, you will need to override the root styles of the component and set the standard CSS width and height to whatever you'd like the size of the Avatar to be.
In our above example, we create a dynamic component to accept a size prop and then use the Material-UI's spacing function to generate the pixel values. This is optional, you can just use standard pixel values here if you'd like.
Avatar Border
To style the Avatar's border, simply set the standard CSS border attribute on the root Avatar element. In the above example, we do this by wrapping the Avatar with a styled-component.
Avatar Fallback
If an image cannot be loaded, the Avatar will fall back to the children contents. If no children are provided, it will fallback to the first letter of the alt attribute.
Avatar Group
The AvatarGroup component can be used to wrap multiple Avatars and provide a condensed view of a max number of Avatars. Using the max prop, you can specify how many Avatars you want to show. See the above example for more information.
Avatar Button
You can wrap an Avatar component in an IconButton to get Button functionality. See the above example.
import React from "react"; import styled, { ThemeProvider } from "styled-components"; import ReactDOM from "react-dom"; import Typography from "@mui/material/Typography"; import Avatar from "@mui/material/Avatar"; import IconButton from "@mui/material/IconButton"; import AvatarGroup from "@mui/material/AvatarGroup"; import { blue, deepPurple, green } from "@mui/material/colors"; const Content = styled.div` margin: auto; max-width: 500px; `; const BorderedAvatar = styled(Avatar)` border: 3px solid lightseagreen; `; const AvatarContainer = styled.div` display: flex; margin-bottom: 14px; & > * { margin: 4px; } `; function ImageAvatars() { return ( <AvatarContainer> <Avatar alt="Jack Sparrow" src="https://images.pexels.com/photos/4016173/pexels-photo-4016173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <Avatar alt="Mike Wazowski" src="https://images.pexels.com/photos/6386956/pexels-photo-6386956.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <Avatar alt="Evelyn Carnahan" src="https://images.pexels.com/photos/1722198/pexels-photo-1722198.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> </AvatarContainer> ); } function LetterAvatars() { return ( <AvatarContainer> <Avatar>Da</Avatar> <Avatar>W</Avatar> <Avatar>G</Avatar> </AvatarContainer> ); } const AvatarLabel = styled.div` display: flex; align-items: center; `; function AvatarWithText() { return ( <AvatarContainer> <AvatarLabel> <Avatar style={{ marginRight: "14px" }} alt="Jack Sparrow" src="https://images.pexels.com/photos/6386956/pexels-photo-6386956.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <Typography variant="body2"> Jack Sparrow</Typography> </AvatarLabel> </AvatarContainer> ); } function ColoredAvatars() { return ( <AvatarContainer> <Avatar sx={{ bgcolor: green[500] }}>G</Avatar> <Avatar sx={{ bgcolor: blue[500] }}>B</Avatar> <Avatar sx={{ bgcolor: deepPurple[500] }}>P</Avatar> </AvatarContainer> ); } function BorderedAvatars() { return ( <AvatarContainer> <BorderedAvatar alt="Jack Sparrow" src="https://images.pexels.com/photos/4016173/pexels-photo-4016173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <BorderedAvatar alt="Mike Wazowski" src="https://images.pexels.com/photos/6386956/pexels-photo-6386956.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <BorderedAvatar alt="Evelyn Carnahan" src="https://images.pexels.com/photos/1722198/pexels-photo-1722198.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> </AvatarContainer> ); } function AvatarButton() { return ( <IconButton onClick={() => console.log("hi")}> <Avatar>C</Avatar> </IconButton> ); } function FallbackAvatars() { return ( <AvatarContainer> <Typography> If broken image, uses children, then first letter of alt, then generic avatar image </Typography> <Avatar alt="Jack Sparrow" src="/broken-image.jpg"> B </Avatar> <Avatar alt="Jack Sparrow" src="/broken-image.jpg" /> <Avatar src="/broken-image.jpg" /> </AvatarContainer> ); } function AvatarGroupExample() { return ( <AvatarContainer> <AvatarGroup max={4}> <Avatar alt="John Smith" src="https://images.pexels.com/photos/4016173/pexels-photo-4016173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <Avatar alt="Jack Sparrow" src="https://images.pexels.com/photos/1722198/pexels-photo-1722198.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <Avatar alt="D" src="/example.jpg" /> <Avatar alt="F" src="/example.jpg" /> <Avatar alt="F" src="/example.jpg" /> </AvatarGroup> </AvatarContainer> ); } function SizedAvatars() { return ( <AvatarContainer> <Avatar sx={{ width: 16, height: 16 }} alt="Jack Sparrow" src="https://images.pexels.com/photos/6386956/pexels-photo-6386956.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" > G </Avatar> <Avatar sx={{ width: 32, height: 32 }} alt="Mike Wazowski" src="https://images.pexels.com/photos/1722198/pexels-photo-1722198.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" > B </Avatar> <Avatar sx={{ width: 64, height: 64 }} alt="Evelyn Carnahan" src="https://images.pexels.com/photos/4016173/pexels-photo-4016173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" > O </Avatar> </AvatarContainer> ); } function App() { return ( <Content> <Typography variant="h5"> Image Avatars </Typography> <ImageAvatars /> <Typography variant="h5"> Letter Avatars </Typography> <LetterAvatars /> <Typography variant="h5"> Avatar with Text </Typography> <AvatarWithText /> <Typography variant="h5"> Colored Avatars </Typography> <ColoredAvatars /> <Typography variant="h5"> Sized Avatars </Typography> <SizedAvatars /> <Typography variant="h5"> Bordered Avatars </Typography> <BorderedAvatars /> <Typography variant="h5"> Fallback Avatar </Typography> <FallbackAvatars /> <Typography variant="h5"> Avatar Group </Typography> <AvatarGroupExample /> <Typography variant="h5"> Avatar Button </Typography> <AvatarButton /> </Content> ); } export default App;