Modals

Custom Modal Content

While components like ModalHeader, ModalBody and ModalFooter are provided, you can also provide any content to the Modal component.

Preview

Source

() => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <Flex bg="gray.500" justifyContent="center" p={6}> <Button onClick={onOpen}>Deactivate Account</Button> <Modal isOpen={isOpen} onClose={onClose} overflow="hidden"> <Box maxWidth="512px" bg="white" borderRadius="lg" shadow="xl" overflow="hidden" > <Box p={6} pb={4} bg="white"> <Flex alignItems={['center', 'flex-start']} flexDirection={['column', 'row']} > <Flex borderRadius="full" size={10} flexShrink={0} bg="red.100" mx="auto" alignItems="center" justifyContent="center" > <Icon color="red.600" size="22px" name="alert-triangle" /> </Flex> <Box ml={4}> <Heading as="h3" fontSize="sm" fontWeight={500} color="gray.900" lineHeight="1.5rem" m={0} > Deactivate Account </Heading> <Box mt={2}> <Text fontSize="sm" color="gray.500"> Are you sure you want to deactivate your account? All of your data will be permanantly removed. This action cannot be undone. </Text> </Box> </Box> </Flex> </Box> <Flex bg="gray.50" px={6} py={3} flexDirection={['column', 'row-reverse']} > <Button ml={[0, 3]} mb={[3, 0]} bg="red.600" width={['100%', 'auto']} borderColor="red.600" boxShadow="base" color="white" onClick={onClose} _hover={{ bg: 'red.500', color: 'white', }} > Deactivate </Button> <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}> Cancel </Button> </Flex> </Box> </Modal> </Flex> ); }

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <Flex bg="gray.500" justifyContent="center" p={6}>
      <Button onClick={onOpen}>Deactivate Account</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <Box
          maxWidth="512px"
          bg="white"
          borderRadius="lg"
          shadow="xl"
          overflow="hidden"
        >
          <Box p={6} pb={4} bg="white">
            <Flex
              alignItems={['center', 'flex-start']}
              flexDirection={['column', 'row']}
            >
              <Flex
                borderRadius="full"
                size={10}
                flexShrink={0}
                bg="red.100"
                mx="auto"
                alignItems="center"
                justifyContent="center"
              >
                <Icon color="red.600" size="22px" name="alert-triangle" />
              </Flex>
              <Box ml={4}>
                <Heading
                  as="h3"
                  fontSize="sm"
                  fontWeight={500}
                  color="gray.900"
                  lineHeight="1.5rem"
                  m={0}
                >
                  Deactivate Account
                </Heading>
                <Box mt={2}>
                  <Text fontSize="sm" color="gray.500">
                    Are you sure you want to deactivate your account? All of
                    your data will be permanantly removed. This action cannot be
                    undone.
                  </Text>
                </Box>
              </Box>
            </Flex>
          </Box>
          <Flex
            bg="gray.50"
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
          >
            <Button
              ml={[0, 3]}
              mb={[3, 0]}
              bg="red.600"
              width={['100%', 'auto']}
              borderColor="red.600"
              boxShadow="base"
              color="white"
              onClick={onClose}
              _hover={{
                bg: 'red.500',
                color: 'white',
              }}
            >
              Deactivate
            </Button>
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Cancel
            </Button>
          </Flex>
        </Box>
      </Modal>
    </Flex>
  );
}