Category: React

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 dialog boxes with Material UI.

Customized Dialogs

We can create our own dialog components by putting into our own components and passing in various styles to it.

For example, we can write:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";
import MuiDialogActions from "@material-ui/core/DialogActions";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(3)
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(2),
    color: theme.palette.grey[500]
  }
});

const DialogTitle = withStyles(styles)(props => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles(theme => ({
  root: {
    padding: theme.spacing(2)
  }
}))(MuiDialogContent);

const DialogActions = withStyles(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(1)
  }
}))(MuiDialogActions);

export default function App() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open dialog
      </Button>
      <Dialog onClose={handleClose} open={open}>
        <DialogTitle onClose={handleClose}>Modal</DialogTitle>
        <DialogContent dividers>
          <Typography gutterBottom>lorem ipsum.</Typography>
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose} color="primary">
            ok
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

We create a styles function that we pass into the withStyles higher-order components with various styles.

We moved the close button by setting some styles for the closeButton class.

To create the DialogTitle component, we passed a component that uses the classes and children from the props.

The classes are applied to icon buttons and dialog titles.

Also, we created the DialogContent and DialogActions in similar ways.

We changed the padding slightly to create both components.

Then we used them all in the App component.

Full-Screen Dialogs

We can make dialogs full screen by adding the fullscreen prop to Dialog .

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogActions from "@material-ui/core/DialogActions";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <Button variant="outlined" color="primary" onClick={() => setOpen(true)}>
        Open dialog
      </Button>
      <Dialog fullScreen open={open} onClose={handleClose}>
        <DialogTitle>Title</DialogTitle>
        <DialogContent>
          <DialogContentText>lorem ipsum</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary" autoFocus>
            ok
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

to create a dialog that’s full screen with the fullScreen prop.

Optional Sizes

We can change the size of the dialog with the maxWidth prop to set the max width of the dialog.

fullWidth has the full width.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogActions from "@material-ui/core/DialogActions";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <Button variant="outlined" color="primary" onClick={() => setOpen(true)}>
        Open dialog
      </Button>
      <Dialog fullWidth maxWidth="sm" open={open} onClose={handleClose}>
        <DialogTitle>Title</DialogTitle>
        <DialogContent>
          <DialogContentText>lorem ipsum</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary" autoFocus>
            ok
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

to add the fullWidth and maxWidth props to the Dialog .

The fullWidth prop will display the dialog that stretches to the width of the screen if it’s narrower than the breakpoint given in maxWidth .

Otherwise, it’ll display with the max-width of the given breakpoint.

Conclusion

We can add dialogs with its own styles, full-screen dialogs, and also width a max-width.

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 tabs with Material UI.

Centered

We can make tabs centered with the centered prop.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
    </>
  );
}

Then the tabs will be centered.

Scrollable Tabs

We can make tabs scrollable with the scrollButtons set to auto and variant set to scrollable .

This way, the scroll buttons will be shown on mobile and hidden in the desktop.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="auto"
        >
          {Array(10)
            .fill()
            .map((_, i) => (
              <Tab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(10)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

We created 10 tabs with the Array constructor and mapped them to tabs.

Similar, we did the same with the TabPanel s.

Now we should see an arrow button when the tabs overflow the page.

On mobile, we can scroll with swiping.

Prevent Scroll Buttons

We can turn off scroll buttons with the scrollButtons prop set to off .

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="off"
        >
          {Array(10)
            .fill()
            .map((_, i) => (
              <Tab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(10)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

And now we’ll never see the tab scroll buttons.

Customizing Tab Styles

We can customize the tab styles with the withStyles higher-order component.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
import { withStyles } from "@material-ui/core/styles";

const StyledTab = withStyles(theme => ({
  root: {
    textTransform: "none",
    color: "yellow",
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: theme.typography.pxToRem(15),
    marginRight: theme.spacing(1)
  }
}))(props => <Tab disableRipple {...props} />);

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="off"
        >
          {Array(5)
            .fill()
            .map((_, i) => (
              <StyledTab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(5)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

We call with the withStyles function with an object with some styles.

And we pass in a function that returns a Tab with props passed into it.

This way, we apply the styles in the object to the tab.

Then we can use the returned StyledTab in our App component.

Conclusion

We can customize tabs in various ways.

The styles, scroll ability, and more can be changed.

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 breadcrumb styling and drawers to Material UI.

Customized Breadcrumbs

We can add styles to breadcrumb items by using the withStyles higher-order component.

For instance, we can write:

import React from "react";
import Breadcrumbs from "@materialui/core/Breadcrumbs";
import { emphasize, withStyles } from "@materialui/core/styles";
import Chip from "@materialui/core/Chip";
import HomeIcon from "@materialui/icons/Home";

const StyledBreadcrumb = withStyles(theme => ({
  root: {
    backgroundColor: theme.palette.grey[100],
    height: theme.spacing(6),
    "&:hover, &:focus": {
      backgroundColor: theme.palette.grey[300]
    },
    "&:active": {
      boxShadow: theme.shadows[1],
      backgroundColor: emphasize(theme.palette.grey[300], 0.12)
    }
  }
}))(Chip);

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs>
      <StyledBreadcrumb
        href="#"
        label="home"
        icon={<HomeIcon fontSize="small" />}
        onClick={handleClick}
      />
      <StyledBreadcrumb
        href="#"
        label="profile"
        onClick={handleClick}
      />
      <StyledBreadcrumb
        label="settings"
        onClick={handleClick}
        onDelete={handleClick}
      />
    </Breadcrumbs>
  );
}

We use the withStyles higher-order component to add some styles to a Chip component to add styles to a rounded box.

We ads the label onClick and onDelete prop as with any regular breadcrumb item.

Integration with react-router

We can incorporate React Router links to our breadcrumbs.

For example, we can write:

import React from "react";
import Breadcrumbs from "@materialui/core/Breadcrumbs";
import { Route, MemoryRouter } from "react-router";
import { Link as RouterLink } from "react-router-dom";
import Link from "@materialui/core/Link";

const LinkRouter = props => <Link {...props} component={RouterLink} />;

export default function App() {
  return (
    <div>
      <MemoryRouter initialEntries={["/"]} initialIndex={0}>
        <Route>
          {({ location }) => {
            return (
              <Breadcrumbs aria-label="breadcrumb">
                <LinkRouter color="inherit" to="/">
                  home
                </LinkRouter>
                <LinkRouter color="inherit" to="/profile">
                  profile
                </LinkRouter>
                <LinkRouter color="inherit" to="/settings">
                  settings
                </LinkRouter>
              </Breadcrumbs>
            );
          }}
        </Route>
      </MemoryRouter>
    </div>
  );
}

to create a LinkRouter component to return the Link component that we display in the breadcrumbs.

We pass in the to prop to our LinkRouter component to set the URL that the link goes to.

Drawer

A nav drawer lets us access destinations within our app.

It’s displayed on the side and has links to let us click on them.

For instance, we can write:

import React from "react";
import Drawer from "@materialui/core/Drawer";
import ListItemIcon from "@materialui/core/ListItemIcon";
import ListItem from "@materialui/core/ListItem";
import ListItemText from "@materialui/core/ListItemText";
import List from "@materialui/core/List";
import MailIcon from "@materialui/icons/Mail";

export default function App() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = event => {
    setOpen(false);
  };
  return (
    <div>
      <Drawer anchor="left" open={open} onClose={toggleDrawer}>
        <List>
          <ListItem button key="home">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="home" />
          </ListItem>
          <ListItem button key="profile">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="profile" />
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

We have the Drawer component with a anchor prop to make it display in the position that we want.

anchor can also be right , top or bottom .

open has the open state of the drawer.

onClose has a function that’s called when it’s closed.

We then render the drawer with the Drawer component.

Inside it, we have a List with some ListItem s.

ListItemIcon has the icon of each entry.

ListItemText has the item text.

Swipeable Drawer

We can add a SwipeableDrawer to make the drawer swipeable.

This works better on mobile devices.

For example, we can write:

import React from "react";
import ListItemIcon from "@materialui/core/ListItemIcon";
import ListItem from "@materialui/core/ListItem";
import ListItemText from "@materialui/core/ListItemText";
import List from "@materialui/core/List";
import MailIcon from "@materialui/icons/Mail";
import SwipeableDrawer from "@materialui/core/SwipeableDrawer";

export default function App() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = event => {
    setOpen(false);
  };
  return (
    <div>
      <SwipeableDrawer anchor="left" open={open} onClose={toggleDrawer}>
        <List>
          <ListItem button key="home">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="home" />
          </ListItem>
          <ListItem button key="profile">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="profile" />
          </ListItem>
        </List>
      </SwipeableDrawer>
    </div>
  );
}

All we did is replace Drawer and SwipeableDrawer .

Conclusion

We can customize our breadcrumbs by changing its styles and content.

It also integrates with React Router.

We can add a drawer to add a sidebar.

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 badges and add chips with Material UI.

Maximum Value of Badges

We can set the maximum value of badges.

It has the max prop to let us do that.

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 (
    <>
      <Badge badgeContent={1000} max={999} color="secondary">
        <MailIcon />
      </Badge>
    </>
  );
}

We added the Mailicon with a badge with the max prop.

It’s set to 999. So when badgeContent is bigger than that, it’ll display 999+.

Badge Overlap

We can change how badges overlap with icons.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
        <MailIcon />
      </Badge>
    </div>
  );
}

We added the overlap ptop and set that to circle to make it work with circles.

Dot Badge

To make the badge display as a dot, we can use the variant set to dot .

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Badge color="secondary" variant="dot">
        <MailIcon />
      </Badge>
    </div>
  );
}

With the variant set to dot , we can see the dot above the mail icon.

Badge Alignment

To change the alignment of the badge, we can use the anchorOrigin prop to set the badge position.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Badge
        color="secondary"
        variant="dot"
        anchorOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <MailIcon />
      </Badge>
    </div>
  );
}

to place the badge on the top left of the icon.

Chip

Chips are small elements that represent an input, attribute, or action.

We can add them by using the Chip component:

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

export default function App() {
  return (
    <div>
      <Chip label="chip" />
    </div>
  );
}

We add a chip with the Chip component.

The label text is displayed as the content.

Outlined Chips

We can add a chip with an outline with the variant set to outlined .

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Chip label="chip" variant="outlined" />
    </div>
  );
}

Now we see an outline instead of a gray background.

Chip Array

We can make a group of chips by putting them in an array.

For instance, we can write:

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

export default function App() {
  const [chipData] = React.useState([
    { key: 0, label: "james" },
    { key: 1, label: "mary" },
    { key: 2, label: "alex" },
    { key: 3, label: "john" },
    { key: 4, label: "david" }
  ]);

  return (
    <div>
      {chipData.map(c => (
        <Chip label={c.label} key={c.key} />
      ))}
    </div>
  );
}

to put them in an array.

We can let users delete a chip with the onDelete prop:

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

export default function App() {
  const [chipData, setChipData] = React.useState([
    { key: 0, label: "james" },
    { key: 1, label: "mary" },
    { key: 2, label: "alex" },
    { key: 3, label: "john" },
    { key: 4, label: "david" }
  ]);

  const handleDelete = chipToDelete => () => {
    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
  };

  return (
    <div>
      {chipData.map(c => (
        <Chip label={c.label} key={c.key} onDelete={handleDelete(c)} />
      ))}
    </div>
  );
}

We added the onDelete prop which takes the handleDelete function called with the chips entry we want to delete.

The function returns a function that sets the chip’s data to the new state without the entry we want to delete.

The ‘x’ icon will be shown to let us remove the chip.

Conclusion

We can add chips to display a small piece of data to the user.

They can be deleted.

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.