Chakra UI Modal Example - Chakra-ui Typing CST Test

Chakra UI Modal Example — Chakra-ui Code

Shows opening and closing a modal dialog using Chakra UI.

import React from 'react';
import { ChakraProvider, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const ModalExample = () => {
	const { isOpen, onOpen, onClose } = useDisclosure();
	return (
		<ChakraProvider theme={theme}>
		<Button mt={10} onClick={onOpen} colorScheme='blue'>Open Modal</Button>
		<Modal isOpen={isOpen} onClose={onClose}>
		<ModalOverlay />
		<ModalContent>
		<ModalHeader>Modal Title</ModalHeader>
		<ModalBody>This is a Chakra UI modal example.</ModalBody>
		<ModalFooter>
		<Button colorScheme='blue' mr={3} onClick={onClose}>Close</Button>
		</ModalFooter>
		</ModalContent>
		</Modal>
		</ChakraProvider>
	);
};

export default ModalExample;

Chakra-ui Language Guide

Chakra UI is a modular and accessible React component library that provides a set of composable, themeable, and responsive UI components.

More Chakra-ui Typing Exercises

Practice Other Languages