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';

Basic Modal#

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

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader onClose={onClose}>Modal Title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            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}>Modal Title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};

Modal with gray footer#

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

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader onClose={onClose}>Modal Title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter bg="#F5F5F5">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            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}>Modal Title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter bg="#F5F5F5">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};

Modal with centered content#

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

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader justifyContent="center" width="100%" onClose={onClose}>
          Modal Title
        </ModalHeader>
        <ModalBody textAlign="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row']}
            radiusBottom="5px"
          >
            <Button
              onClick={onClose}
              variant="primary"
              width="100%"
              flex={1}
              mr="6px"
            >
              Submit
            </Button>
            <Button onClick={() => setOpen(false)} width="100%" flex={1}>
              Cancel
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader justifyContent="center" width="100%" onClose={onClose}>
          Modal Title
        </ModalHeader>
        <ModalBody textAlign="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row']}
            radiusBottom="5px"
          >
            <Button
              onClick={onClose}
              variant="primary"
              width="100%"
              flex={1}
              mr="6px"
            >
              Submit
            </Button>
            <Button onClick={() => setOpen(false)} width="100%" flex={1}>
              Cancel
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
};

Modal with full width button#

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

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader justifyContent="center" width="100%" onClose={onClose}>
          Modal Title
        </ModalHeader>
        <ModalBody textAlign="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row']}
            radiusBottom="5px"
          >
            <Button onClick={onClose} variant="primary" width="100%">
              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 justifyContent="center" width="100%" onClose={onClose}>
          Modal Title
        </ModalHeader>
        <ModalBody textAlign="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
          ante vitae eros suscipit pulvinar.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row']}
            radiusBottom="5px"
          >
            <Button onClick={onClose} variant="primary" width="100%">
              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}>Modal Title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            id ante vitae eros suscipit pulvinar.
          </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}>Modal Title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            id ante vitae eros suscipit pulvinar.
          </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 />#