Modal

Modal / Dialog component, displays when isOpen is true.

Uses the Reach UI Modal component to cover accessibility requirements.

Copy
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  useDisclosure,
} from 'minerva-ui';

Open Modal
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
        <ModalBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
          esse quis. Sunt ad dolore quis aute consequat.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
        <ModalBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
          esse quis. Sunt ad dolore quis aute consequat.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};

Customize ModalOverlay or ModalContent#

Copy
import {
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'minerva-ui';

Open Modal
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <ModalOverlay
        isOpen={isOpen}
        onDismiss={onClose}
        bg="rgba(0, 150, 136, 0.31)"
      >
        <ModalContent
          isOpen={isOpen}
          onClose={onClose}
          maxWidth="80vw"
          overflow="hidden"
        >
          <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
          <ModalBody>
            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
            ullamco deserunt aute id consequat veniam incididunt duis in sint
            irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
            officia tempor esse quis. Sunt ad dolore quis aute consequat.
          </ModalBody>
          <ModalFooter bg="gray.50">
            <Flex
              px={6}
              py={3}
              flexDirection={['column', 'row-reverse']}
              bg="gray.50"
              radiusBottom="5px"
            >
              <Button
                onClick={onClose}
                boxShadow="base"
                width={['100%', 'auto']}
              >
                Submit
              </Button>
            </Flex>
          </ModalFooter>
        </ModalContent>
      </ModalOverlay>
    </>
  );
};
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <ModalOverlay
        isOpen={isOpen}
        onDismiss={onClose}
        bg="rgba(0, 150, 136, 0.31)"
      >
        <ModalContent
          isOpen={isOpen}
          onClose={onClose}
          maxWidth="80vw"
          overflow="hidden"
        >
          <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
          <ModalBody>
            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
            ullamco deserunt aute id consequat veniam incididunt duis in sint
            irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
            officia tempor esse quis. Sunt ad dolore quis aute consequat.
          </ModalBody>
          <ModalFooter bg="gray.50">
            <Flex
              px={6}
              py={3}
              flexDirection={['column', 'row-reverse']}
              bg="gray.50"
              radiusBottom="5px"
            >
              <Button
                onClick={onClose}
                boxShadow="base"
                width={['100%', 'auto']}
              >
                Submit
              </Button>
            </Flex>
          </ModalFooter>
        </ModalContent>
      </ModalOverlay>
    </>
  );
};

Animations#

Animations are included by default in the <GlobalStyles /> component:

Copy
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideup {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}
[data-reach-dialog-overlay] {
  animation: fadein 0.18s;
}
[data-reach-dialog-content] {
  animation: slideup 0.18s;
}

Props#

<Modal />#

<ModalHeader />#

<ModalBody /> and <ModalFooter />#

<ModalContent />#

<ModalOverlay />#