Modal

Getting Started

Forms

Typography

Utilities

Visualization Components

Modals are overlays used to display content on top of other content. More specifically, a modal is used to limit the user’s focus to a particular set of content.

Modals are portaled to the body of the document

Props

children

Node

className

String

disableOverlayClose

Bool

false

display

'standard' │ 'fullscreen'

'standard'

displayCloseIcon

Bool

true

isVisible

Bool

false

onAfterClose

Func

undefined

onAfterOpen

Func

undefined

onClose

Func

required

Examples

Default Usage

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal
        isVisible={on}
        onClose={toggle}
        onAfterOpen={() => console.log('opened')}
        onAfterClose={() => console.log('closed')}
      >
        <div className="px-4 pb-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
          <Pagination
            currentPage={1}
            pageSize={10}
            totalItems={200}
            onPageChange={pageNum => {}}
            onPageSizeChange={pageSize => {}}
          />
        </div>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal
        isVisible={on}
        onClose={toggle}
        onAfterOpen={() => console.log('opened')}
        onAfterClose={() => console.log('closed')}
      >
        <div className="px-4 pb-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
          <Pagination
            currentPage={1}
            pageSize={10}
            totalItems={200}
            onPageChange={pageNum => {}}
            onPageSizeChange={pageSize => {}}
          />
        </div>
      </Modal>
    </div>
  )}
</Toggle>

With Title

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
      </Modal>
    </div>
  )}
</Toggle>

With Actions

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle>

Overflow Behavior

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle>

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal display="fullscreen" isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome FULL SCREEN Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal display="fullscreen" isVisible={on} onClose={toggle}>
        <ModalTitle>My Awesome FULL SCREEN Modal</ModalTitle>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <div className="p-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
        </div>
        <ModalActions>
          <Button theme="secondary" onClick={toggle}>
            Cancel
          </Button>
          <Button onClick={toggle}>Confirm</Button>
        </ModalActions>
      </Modal>
    </div>
  )}
</Toggle>

Without close icon

<Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal displayCloseIcon={false} isVisible={on} onClose={toggle}>
        <div className="px-4 pb-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
          <Pagination
            currentPage={1}
            pageSize={10}
            totalItems={200}
            onPageChange={pageNum => {}}
            onPageSizeChange={pageSize => {}}
          />
        </div>
      </Modal>
    </div>
  )}
</Toggle><Toggle>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Modal</Button>
      <Modal displayCloseIcon={false} isVisible={on} onClose={toggle}>
        <div className="px-4 pb-4">
          <BodyText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at
            varius nibh. Fusce ornare at purus venenatis ullamcorper. Nunc
            arcu velit, consectetur non rhoncus in, porta hendrerit risus.
            Aliquam ultrices lacus venenatis fringilla rutrum. Maecenas tempus
            libero vitae enim ultrices vestibulum. Maecenas ac ante bibendum,
            ultrices dolor eget, lacinia mauris. Aliquam erat volutpat. Ut sem
            ipsum, hendrerit feugiat sem ac, venenatis condimentum ex. Aliquam
            at consectetur nisl, consequat posuere velit.
          </BodyText>
          <Pagination
            currentPage={1}
            pageSize={10}
            totalItems={200}
            onPageChange={pageNum => {}}
            onPageSizeChange={pageSize => {}}
          />
        </div>
      </Modal>
    </div>
  )}
</Toggle>

Modal

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

With Title

With Actions

Overflow Behavior

Modal size

Without close icon

Props