Material UI — Backdrops and Avatars

medium=referral)

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 add backdrops and avatars with Material UI.

Backdrop

A backdrop lets us give emphasis to components that show above it.

For example, we can write:

import React from "react";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button from "@material-ui/core/Button";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleToggle}>
        Show backdrop
      </Button>
      <Backdrop open={open} onClick={handleClose}>
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

to add a backdrop with the Backdrop component.

Inside it, we added a CircularProgress to show a loading spinner.

The open prop lets us set when it’s opened.

onClick lets us show to do something when we click on the backdrop.

In our example, we close it by setting the open state to false .

Styling Backdrops

We can also style backdrops.

For example, we can change the color of the content with the color property:

import React from "react";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "yellow"
  }
}));

export default function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleToggle}>
        Show backdrop
      </Button>
      <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

We set the color to 'yellow' to display the spinner in yellow.

Also, we changed the z-index with the zIndex property.

Avatar

To add an avatar, we can use the Avatar component.

To add one, we can write:

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

export default function App() {
  return (
    <div>
      <Avatar alt="cat" src="http://placekitten.com/200/200" />
    </div>
  );
}

We add the Avatar component with the src prop to set the URL of the image.

alt has a text description of it.

Letter Avatars

We can also add letters inside the Avatar .

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Avatar>X</Avatar>
    </div>
  );
}

We added the Avatar component with a letter between the tags to show it.

Avatar Sizes

The size of the avatar can be changed.

We’ve to change it with our own styles.

For example, we can write:

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

const useStyles = makeStyles(theme => ({
  large: {
    width: theme.spacing(8),
    height: theme.spacing(8)
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Avatar
        alt="cat"
        src="http://placekitten.com/200/200"
        className={classes.large}
      />
    </div>
  );
}

We use the makeStyles function to create the files.

We created the large class to set the width and height width the theme.spacing method.

Then we use the useStyles hook to get the classes and apply it.

The classes.large class is applied to the avatar to make it bigger.

Icon Avatars

We can add an icon inside the avatar.

For example, we can write:

import React from "react";
import Avatar from "@material-ui/core/Avatar";
import { makeStyles } from "@material-ui/core/styles";
import FolderIcon from "@material-ui/icons/Folder";
import { pink } from "@material-ui/core/colors";

const useStyles = makeStyles(theme => ({
  pink: {
    color: theme.palette.getContrastText(pink[900]),
    backgroundColor: pink[500]
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Avatar className={classes.pink}>
        <FolderIcon />
      </Avatar>
    </div>
  );
}

to add a folder icon into the avatar.

Avatar Variants

Avatars can have a non-round shape.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Avatar variant="square">foo</Avatar>
    </div>
  );
}

to make a square avatar with some text in it.

Conclusion

We can add backdrops to emphasize the display of something.

Avatars let us display icons or text in a small container.