Modal (Deprecated)

Modal is deprecated. Please use the Sheet component instead with the modal variant. This Sheet + modal variant automatically provides the default mobile experience that we want

React

import { Modal } from '@hoverinc/design-system-react-web';

Render the Modal component itself unconditionally using the isOpen and onClose props to control its open state. The useDisclosure hook is purpose-built to manage the open state of overlays.

Initial Focus

By default, the first focusable element will receive focus when the Modal is opened. Pass initialFocusRef to focus on a particular element instead.

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

  return (
    <>
      <Modal
        footer={
          <>
            <Button size="large">Charge Lasers</Button>
            <Button size="large">Fire Lasers</Button>
          </>
        }
        header="Spectacular Header"
        isOpen={isOpen}
        onClose={onClose}
      >
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Amet consectetur
        adipiscing elit quisque faucibus ex sapien. Quisque faucibus ex sapien
        vitae pellentesque sem placerat. Vitae pellentesque sem placerat in id
        cursus mi.
      </Modal>

      <Button iconBefore={iconExpand} onClick={onOpen}>
        Open
      </Button>
    </>
  );
};

PropDescription
sizeSets a specific size for the Modal. Valid values are small, medium, large, full or auto. See below for more information on sizing.
headerSets the heading content. The value can be a simple string, in which case it is rendered as the appropriate Heading style. A JSX fragment can also be provided.
footerSets the footer content. When provided, footer content is wrapped in an HStack by default with the appropriate spacing. If the footer content is wrapped in a layout container (Box, Stack, etc.), it will be rendered as the footer element.
isClosableDefaults to true.

Scrollable Content

By default, content will expand the modal to fill screen. When displaying long-form content in a Modal, you likely want to restrict the height of the scrollable container. Pass maxContentHeight to control the maximum height of the scroll container.

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

  return (
    <>
      <Modal
        maxContentHeight="40vh"
        header="Terms & Privacy"
        size="small"
        isOpen={isOpen}
        onClose={onClose}
        footer={
          <>
            <Button size="large" onClick={onClose}>
              Accept
            </Button>
            <Button size="large" onClick={onClose}>
              Cancel
            </Button>
          </>
        }
      >
        <Heading size={300}>Terms of Use</Heading>
        <LoremIpsum generate={{ p: 2 }} />

        <Heading size={300}>Privacy Policy</Heading>
        <LoremIpsum generate={{ p: 3, sentences: 5 }} />
      </Modal>
      <Button iconBefore={iconUser} onClick={onOpen}>
        Terms & Privacy
      </Button>
    </>
  );
};

Size

Responsive Sizing

The default size will select a size automatically using media queries, so setting an explicit size is usually only necessary to specify auto or full.

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [size, setSize] = useState(undefined);

  const select = (
    <Select
      onChange={event => setSize(event.target.value)}
      size="small"
      value={size ?? 'default'}
      width="auto"
    >
      {['full', 'small', 'medium', 'default', 'large', 'auto'].map(size => (
        <option key={size}>{size}</option>
      ))}
    </Select>
  );

  return (
    <>
      <Modal
        footer={select}
        header="Header"
        isOpen={isOpen}
        onClose={onClose}
        size={size}
      >
        <Image src="/images/kitten--1920-1080.jpg" />
      </Modal>

      <HStack>
        <Button iconBefore={iconExpand} onClick={onOpen}>
          Open
        </Button>
        {select}
      </HStack>
    </>
  );
};

Full

Expand the Modal to fill the viewport in both dimensions.

Auto

Size the Modal to fit its content.

This size is useful for images and other media that have explicit dimensions or if you want to control the size of the Modal manually by specifying width and/or height on the children.

Bootstrap

To use the Bootstrap Modal you must have the Bootstrap JavaScript bundle installed. You do not need to initialize this component with your own JS. It should just work!

Here is an example of what a Bootstrap Modal looks like (we have overridden a couple of things so you can see it without having to click a trigger to open it). By default, you will get the size and typography shown. We offer 3 size variants aligned to the Figma components. The class .modal-md is the same as the default, as shown here. You can use .modal-lg or .modal-sm to get those size variants. See Bootstrap's docs for Modal for more options and classes you can use if the basics shown here don't cover your use case.

<div class="docs-example">
  <div class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <p>
            Lorem ipsum dolor sit amet,
            <a href="#">consectetur adipiscing elit</a>. Quisque arcu elit,
            viverra tincidunt ullamcorper id, fermentum vel dui. Proin non risus
            urna. Vestibulum mauris ex, scelerisque at volutpat eu, posuere in
            purus. Suspendisse hendrerit enim dui, ut tincidunt ipsum volutpat
            varius. Suspendisse consequat fermentum neque, vitae faucibus orci
            posuere vel.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-primary"
            data-bs-dismiss="modal"
          >
            Cancel
          </button>
          <button type="button" class="btn btn-primary">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>

ClassDescription
.modal-sm, .modal-lgApply to your <div class="modal"> wrapper to set a non-default size for your Modal.

Drawer

Brand strategy