Material-UI Modal

Our Material-ui modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a Material-ui modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Use Material-ui’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.

Keep reading our Bootstrap Modal examples and learn how to use it.

Example

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
// core components
import componentStyles from "assets/theme/components/dialog.js";

const useStyles = makeStyles(componentStyles);

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

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

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

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

  return (
    <>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Slide in alert dialog
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
      >
        <div className={classes.dialogHeader}>
          <Typography
            variant="h5"
            component="h5"
            className={classes.dialogTitle}
          >
            New message to undefined
          </Typography>
          <IconButton onClick={handleClose}>
            <Clear />
          </IconButton>
        </div>
        <DialogContent>...</DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="secondary" variant="contained">
            Close
          </Button>
          <Button onClick={handleClose} color="primary" variant="contained">
            Save changes
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

Variations

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
// core components
import componentStyles from "assets/theme/components/dialog.js";

const useStyles = makeStyles(componentStyles);

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

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

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

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

  return (
    <>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Slide in alert dialog
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
      >
        <div className={classes.dialogHeader}>
          <Typography
            variant="h5"
            component="h5"
            className={classes.dialogTitle}
          >
            Type your modal title
          </Typography>
          <IconButton onClick={handleClose}>
            <Clear />
          </IconButton>
        </div>
        <DialogContent>
          <Typography variant="body2" component="p">
            Far far away, behind the word mountains, far from the countries
            Vokalia and Consonantia, there live the blind texts. Separated they
            live in Bookmarksgrove right at the coast of the Semantics, a large
            language ocean.
          </Typography>
          <Typography variant="body2" component="p">
            A small river named Duden flows by their place and supplies it with
            the necessary regelialia. It is a paradisematic country, in which
            roasted parts of sentences fly into your mouth.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary" variant="contained">
            Save changes
          </Button>
          <Button
            component={Box}
            onClick={handleClose}
            color="primary"
            marginLeft="auto!important"
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Notifications from "@material-ui/icons/Notifications";
// core components
import componentStyles from "assets/theme/components/dialog.js";

const useStyles = makeStyles(componentStyles);

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

export default function Example() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    setOpen(false);
  };
  const dialogClasses = {
    paper: classes.dialogNotification,
  };
  return (
    <>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Slide in alert dialog
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
        classes={dialogClasses}
      >
        <div className={classes.dialogHeader}>
          <Typography
            variant="h5"
            component="h5"
            className={classes.dialogTitle}
          >
            Your attention is required
          </Typography>
          <IconButton onClick={handleClose}>
            <Box component={Clear} color={theme.palette.white.main} />
          </IconButton>
        </div>
        <DialogContent>
          <Box textAlign="center" paddingTop="1rem" paddingBottom="1rem">
            <Box
              component={Notifications}
              width="3em!important"
              height="3em!important"
            ></Box>
            <Typography
              variant="h4"
              component="h4"
              className={classes.dialogHeading}
            >
              You should read this!
            </Typography>
            <Typography variant="body2" component="p">
              A small river named Duden flows by their place and supplies it
              with the necessary regelialia.
            </Typography>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="secondary" variant="contained">
            Ok, got it
          </Button>
          <Button
            component={Box}
            onClick={handleClose}
            color="secondary"
            marginLeft="auto!important"
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import Checkbox from "@material-ui/core/Checkbox";
import FilledInput from "@material-ui/core/FilledInput";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import InputAdornment from "@material-ui/core/InputAdornment";
import Slide from "@material-ui/core/Slide";
// @material-ui/icons components
import Email from "@material-ui/icons/Email";
import Lock from "@material-ui/icons/Lock";
// core components
import componentStyles from "assets/theme/views/auth/login.js";

const useStyles = makeStyles(componentStyles);

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

export default function Example() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    setOpen(false);
  };
  const cardClasses = { root: classes.cardRoot };
  const buttonClasses = { root: classes.buttonRoot };
  const cardContentClasses = { root: classes.cardContent };
  const checkboxClasses = {
    root: classes.formControlLabelRoot,
    label: classes.formControlLabelLabel,
  };
  const titleTypographyProps = {
    component: Box,
    textAlign: "center",
    marginBottom: "1rem!important",
    marginTop: ".5rem!important",
    fontSize: "1rem!important",
  }
  return (
    <>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Slide in alert dialog
      </Button>
      <Dialog
        maxWidth="xs"
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogContent>
          <Card classes={cardClasses}>
            <CardHeader
              className={classes.cardHeader}
              title={
                <Box
                  fontSize="80%"
                  fontWeight="400"
                  component="small"
                  color={theme.palette.gray[600]}
                >
                  Sign in with
                </Box>
              }
              titleTypographyProps={titleTypographyProps}
              subheader={
                <Box textAlign="center">
                  <Box
                    component={Button}
                    variant="contained"
                    marginRight=".5rem!important"
                    classes={buttonClasses}
                  >
                    <Box component="span" marginRight="4px">
                      <Box
                        alt="..."
                        component="img"
                        width="20px"
                        className={classes.buttonImg}
                        src={
                          require("assets/img/icons/common/github.svg").default
                        }
                      ></Box>
                    </Box>
                    <Box component="span" marginLeft=".75rem">
                      Github
                    </Box>
                  </Box>
                  <Button variant="contained" classes={buttonClasses}>
                    <Box component="span" marginRight="4px">
                      <Box
                        alt="..."
                        component="img"
                        width="20px"
                        className={classes.buttonImg}
                        src={
                          require("assets/img/icons/common/google.svg").default
                        }
                      ></Box>
                    </Box>
                    <Box component="span" marginLeft=".75rem">
                      Google
                    </Box>
                  </Button>
                </Box>
              }
            ></CardHeader>
            <CardContent classes={cardContentClasses}>
              <Box
                color={theme.palette.gray[600]}
                textAlign="center"
                marginBottom="1rem"
                marginTop=".5rem"
                fontSize="1rem"
              >
                <Box fontSize="80%" fontWeight="400" component="small">
                  Or sign in with credentials
                </Box>
              </Box>
              <FormControl
                variant="filled"
                component={Box}
                width="100%"
                marginBottom="1rem!important"
              >
                <FilledInput
                  autoComplete="off"
                  type="email"
                  placeholder="Email"
                  startAdornment={
                    <InputAdornment position="start">
                      <Email />
                    </InputAdornment>
                  }
                />
              </FormControl>
              <FormControl
                variant="filled"
                component={Box}
                width="100%"
                marginBottom="1rem!important"
              >
                <FilledInput
                  autoComplete="off"
                  type="password"
                  placeholder="Password"
                  startAdornment={
                    <InputAdornment position="start">
                      <Lock />
                    </InputAdornment>
                  }
                />
              </FormControl>
              <FormControlLabel
                value="end"
                control={<Checkbox color="primary" />}
                label="Remeber me"
                labelPlacement="end"
                classes={checkboxClasses}
              />
              <Box textAlign="center" marginTop="1.5rem" marginBottom="1.5rem">
                <Button color="primary" variant="contained">
                  Sign in
                </Button>
              </Box>
            </CardContent>
          </Card>
        </DialogContent>
      </Dialog>
    </>
  );
}

Props

If you want to see more examples and properties please check the official Material-UI Documentation.