Material UI — Avatars and Badges

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize avatars and add badges with Material UI.

Fallback Avatar

The avatar will can use alternative items for fallbacks.

The first thing that it looks for is the children.

Then it looks for the alt text.

If those aren’t available, then the generic avatar icon will be displayed.

For example, we can write:

import React from "react";
import Avatar from "@material-ui/core/Avatar";

export default function App() { return ( <div> <Avatar src="/broken-image.png" /> </div> ); }

Then we’ll see the generic avatar icon since `broken-image.png` doesn’t exist.

### Grouped Avatars

We can use render avatars in a group with the `AvatarGroup` component.

For instance, we can write:

import React from "react"; import Avatar from "@material-ui/core/Avatar"; import AvatarGroup from "@material-ui/lab/AvatarGroup"; export default function App() { return ( <div> <AvatarGroup max={4}> {Array(10) .fill() .map((@material_, i) => ( <Avatar alt={@materialcat ${i}@material} src="http://placekitten.com/200/200" /> ))} </AvatarGroup> </div> ); }

to display 10 avatars but only show 3 of them plus an avatar to indicate that there’re more icons.

That’s 4 icons altogether, which is the value of the `max` prop.

The `max` prop lets us restrict the number of avatars to display.

### Avatar With Badge

We can display an avatar with a badge.

For example, we can write:

import React from "react"; import Badge from "@material-ui/core/Badge"; import Avatar from "@material-ui/core/Avatar"; import { withStyles } from "@material-ui/core/styles";

const StyledBadge = withStyles(theme => ({
  badge: {
    backgroundColor: "green",
    color: "green",
    boxShadow: @material`0 0 0 2px ${theme.palette.background.paper}@material`,
    "&::after": {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      borderRadius: "50%",
      border: "1px solid currentColor",
      content: '""'
    }
  }
}))(Badge);

export default function BadgeAvatars() { return ( <div> <StyledBadge overlap="circle" anchorOrigin={{ vertical: "bottom", horizontal: "right" }} variant="dot" > <Avatar alt="Remy Sharp" src="http://placekitten.com/200/200" /> </StyledBadge> </div> ); }

We created a `StyledBadge` component that has a green background and positioned to the bottom right of the avatar.

Then we used the `StyledBadge` with the `overlap` prop to make the badge overlap with the avatar.

The `anchorOrigin` prop places the badge to the bottom right with the `vertical` and `horizontal` properties.

`variant` is set to `dot` to display a dot.

Then we put our `Avatar` inside the `StyledBadge` component to put it below the badge.

### Badge

We can add badges with the `Badge` component.

For example, we can write:

import React from "react"; import Badge from "@material-ui/core/Badge"; import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <Badge badgeContent={10} color="primary">
        <MailIcon />
      </Badge>
    </div>
  );
}
```

We add a badge with the `Badge` component.

`badgeContent` has the content of the badge.

`color` has the color. `primary` is blue.

Then we put an icon in it to display the icon below the badge.

### Customized Badges

Like many other Material UI components, we can use the `withStyles` function to let us style the badges the way we want.

For example, we can write:

```
import React from "react";
import Badge from "@material-ui/core/Badge";
import { withStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import MailIcon from "@material-ui/icons/Mail";
</code></pre>
<p>const StyledBadge = withStyles(theme => ({
badge: {
right: -3,
top: 10,
border: @material<code>2px solid red@material</code>,
padding: "0 3px"
}
}))(Badge);</p>
<pre><code>export default function App() {
  return (
    <IconButton>
      <StyledBadge badgeContent={20} color="secondary">
        <MailIcon />
      </StyledBadge>
    </IconButton>
  );
}
```

to create a `StyledBadge` component with the `vadge` class.

Inside the `badge` property, we have the positioning styles, border, and padding.

Then in `App` , we have the `IconButton` to add an icon button.

Inside it, we have the `StyledBadge` component and we pass in props for the content and color.

### Badge Visibility

We can make badges invisible with the `invisible` prop.

For example, we can write:

```
import React from "react";
import Badge from "@material-ui/core/Badge";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MailIcon from "@material-ui/icons/Mail";
</code></pre>
<p>export default function App() {
const @material[count, setCount@material] = React.useState(0);</p>
<pre><code>  return (
    <>
      <Button
        aria-label="reduce"
        onClick={() => {
          setCount(count => count + 1);
        }}
      >
        increment
      </Button>
      <IconButton>
        <Badge badgeContent={count} color="secondary" invisible={count === 0}>
          <MailIcon />
        </Badge>
      </IconButton>
    </>
  );
}
```

to add the count to the `badgeContent` .

We also set the `invisible` prop to `count === 0` so that it only displays when the `count` is bigger than 0.

### Conclusion

We can add avatars to display names.

Badges can display small pieces of data above an avatar or icon.