Modal

The Modal should only contain content or flows which are related to the current page and not replace pages, therefore its complexity level has to be simple. Consider the fullscreen state if you want to focus the users attention to the modal content.

Modal is responsive per default but the width can be adjusted (the default is 600px or 37.5rem). Content on the modal is scrollable and has a space5 bounding box.

Example Code

The following contains a simple example, with a resulting modal similar to the live examples above.

const [showModal, setShowModal] = useState(true);

<Modal onClose={() => setShowModal(false)} fullscreen={true}>
    {dismiss => (
        <>
            <Headline as="h2">Add Note</Headline>
            <Text as="p" my={3}>
                Ensure that all participants are aware of the change.
            </Text>
            <Button onClick={dismiss}>Add Note</Button>
            <TextButton onClick={dismiss}>Cancel</TextButton>
        </>
    )}
</Modal>;

API

The Modal supports width styled-system props.

Dismiss

Modal provides a function to dismiss the component with an animation. The dismiss function is available either through render props or a hook. After the animation has finished the onClose callback will be called.

Render Props

<Modal>
    {dismiss => <Button onClick={dismiss}>Close</Button>}
</Moal>

Hook

const InsideModal = () => {
    const dismiss = useModalDismiss();
    return <button onClick={dismiss}>Close</button>;
}

const ModalWrapper = () => (
    <Modal>
        <InsideModal />
    </Modal>
);