Modal

import { Modal, useModal } from '@elemental-ui-alpha/modal';

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.

Modals interrupt user workflow by design. They are most effective when a task must be completed before a user can continue. While effective when used correctly, modals should be used sparingly to limit disruption to a user experience.

Usage

const { isOpen, openModal, closeModal } = useModal();

return (
  <>
    <Button onClick={openModal}>Open</Button>
    <Modal isOpen={isOpen} onDismiss={closeModal} title="example">
      <Heading level="3" marginBottom="medium">
        Modal
      </Heading>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </Text>
    </Modal>
  </>
);