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

Dialog

A dialog box is used to let users know about some information.

To add one, we can use the Dialog component.

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 List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
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 simple dialog
      </Button>
      <Dialog onClose={handleClose} open={open}>
        <DialogTitle id="simple-dialog-title">dialog</DialogTitle>
        <List>
          <ListItem autoFocus button onClick={handleClose}>
            close
          </ListItem>
        </List>
      </Dialog>
    </div>
  );
}

to add a dialog with some items in it.

We added a List with a ListItem which is a button.

We can click it to close the dialog box with the setOpen function with the false argument.

Then open prop controls whether it’s opened or not.

handleClose lets us close the dialog by setting open to false with setOpen .

variant set to outlined lets us add an outline.

#programming #web-development #javascript #technology #software-development