title: "Modal" slug: "/packages/modal" category: "overlay" componentNames:

• "Modal"

Modal

The modal is a component that displays content in a box overlaying the page.

import Modal from "@ds-kit/modal"

Basic

<Modal disclosure={<Button variant="primary">Open modal</Button>} tabIndex={0}>
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </div>
</Modal>

Modal with overflowing content

<Modal disclosure={<Button variant="primary">Open modal</Button>} tabIndex={0}>
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>First paragraph</p>
    <p>Last paragraph</p>
  </div>
</Modal>

Modal with render prop

<Modal disclosure={<Button variant="primary">Open modal</Button>}>
  {dialog => (
    <div>
      <Div>First paragraph</Div>
      <Button variant="danger" onClick={() => dialog.hide()}>
        Cancel
      </Button>
    </div>
  )}
</Modal>

Different modal sizes

<Div style={{ display: "flex" }}>
  <Div mx="1rem">
    <Modal
      size="sm"
      disclosure={<Button variant="primary">Small modal</Button>}
      tabIndex={0}
    >
      <span>Small modal</span>
    </Modal>
  </Div>
  <Div mx="1rem">
    <Modal
      size="md"
      disclosure={<Button variant="primary">Normal modal</Button>}
      tabIndex={0}
    >
      <span>Normal modal</span>
    </Modal>
  </Div>
  <Div mx="1rem">
    <Modal
      size="lg"
      disclosure={<Button variant="primary">Large modal</Button>}
      tabIndex={0}
    >
      <span>Large modal</span>
    </Modal>
  </Div>
</Div>