Skip to main content
🏠ComponentsModal

Modal

The Modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

import React from 'react';
import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalSubtitle,
  ModalDivider,
  Typography,
  Icon,
} from '@qtm/react2';

const [open, setOpen] = React.useState(false);

<Button 
  variant="filled"
  color="primary"
  onClickEvent={() => setOpen(true)}
>
  Open modal
</Button>
<Modal open={open} onCloseModal={() => setOpen(false)}>
  <ModalHeader>
    <ModalTitle>
      <Icon 
        icon="warning"
        classes="text-primary-500 dark:text-bluegrey-25"
      />
      <div>
        <Typography variant="heading-6">Dialog Modal</Typography>
        <ModalSubtitle>Caption placeholder</ModalSubtitle>
      </div>
    </ModalTitle>
  </ModalHeader>
  <ModalBody>
    <Typography variant="body-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl
      nec ultricies lacinia, nisl nisl aliquam nisl, eget aliquam nisl nisl sit
      amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquam
      nisl, eget aliquam nisl nisl sit amet nisl.
    </Typography>
    <Typography variant="body-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl
      nec ultricies lacinia, nisl nisl aliquam nisl, eget aliquam nisl nisl sit
      amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquam
      nisl, eget aliquam nisl nisl sit amet nisl.
    </Typography>
  </ModalBody>
  <ModalDivider />
  <ModalFooter classes="justify-between">
    <Button variant="ghost" color="primary" onClickEvent={() => setOpen(false)}>
      Cancel
    </Button>
    <Button variant="filled" color="primary" onClickEvent={() => setOpen(false)}>
      Confirm
    </Button>
  </ModalFooter>
</Modal>

Sizes​

Modal are available in three size: small, medium and large. You can use the attribute size to control width of modal.

import { Modal } from '@qtm/react2';

<Modal size="small">...</Modal>
<Modal size="medium">...</Modal>
<Modal size="large">...</Modal>

Event handling​

The Modal component provides several event handlers to manage user interactions:

onCloseModal​

Triggered when the modal is closed. This can happen in several ways:

  • When the close button in the header is clicked
  • When the user presses the Escape key
  • When the user clicks outside the modal content
const handleClose = () => {
  console.log('Modal closed');
  // Your logic here
};

<Modal 
  open={isOpen} 
  onCloseModal={handleClose}
>
  {/* Modal content */}
</Modal>

ModalHeader onCloseButton​

The ModalHeader component has its own close button that can trigger a separate callback:

const handleHeaderClose = () => {
  console.log('Close button in header clicked');
  // Your specific header close logic here
};

<ModalHeader onCloseButton={handleHeaderClose}>
  <ModalTitle>Modal Title</ModalTitle>
</ModalHeader>

Note that when the close button in the header is clicked, both onCloseButton and the Modal's onCloseModal will be triggered.

API​

QtmModal

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
openbooleanfalseIf true, the modal is displayed
overlaybooleantrueIf false, the overlay modal is transparent
overlayStylestringlist of classes to override the styles applied to the modal overlay. ex: bg-primary-500 opacity-50
size"large" | "medium" | "small"'medium'Set size for title and all buttons in modal
EventTypeDescription
onCloseModalCustomEvent<any>Callback fired when the modal is closed

QtmModalHeader

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
closeIconbooleantrueif true, a close button is displayed
size"large" | "medium" | "small"the size of the modal header
EventTypeDescription
onClosedButtonCustomEvent<any>callback fired when the close button is clicked

QtmModalBody

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmModalFooter

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing