Modals

Custom Modal Content#

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

Deactivate Account
() => {
  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>
  );
};