Modal/Dialog Example - Material-ui Typing CST Test

Modal/Dialog Example — Material-ui Code

Shows a modal dialog that opens and closes using Material-UI.

import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Typography } from '@mui/material';

const ModalExample = () => {
	const [open, setOpen] = useState(false);
	return (
		<>
		<Button variant='contained' onClick={() => setOpen(true)}>Open Modal</Button>
		<Dialog open={open} onClose={() => setOpen(false)}>
		<DialogTitle>Modal Title</DialogTitle>
		<DialogContent>
		<Typography>This is a simple Material-UI modal dialog.</Typography>
		</DialogContent>
		<DialogActions>
		<Button onClick={() => setOpen(false)}>Close</Button>
		</DialogActions>
		</Dialog>
		</>
	);
};

export default ModalExample;

Material-ui Language Guide

Material-UI (MUI) is a React-based front-end framework that implements Google's Material Design system with prebuilt, customizable components and styling solutions.

More Material-ui Typing Exercises

Practice Other Languages