Skip to main content
HomeComponentsModal
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

Modal

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

The Modal is a main container with the following structure:

  • ModalHeader which usually contains a title ModalTitle, a subtitle ModalSubtitle, and the close icon.
  • ModalBody which contains the information and/or controls needed to complete the modal’s task. It can include message text and components.
  • ModalDivider which is divider between body and footer.
  • ModalFooter which contains the main actions needed to complete or cancel the dialog task.
<Modal open>
  <ModalHeader closeIcon>
    <ModalTitle>
      <Icon icon="info" variant="outlined"></Icon>
      <div>
        <Typography>Dialog modal</Typography>
        <ModalSubtitle>Caption placeholder</ModalSubtitle>
      </div>
    </ModalTitle>
  </ModalHeader>

  <ModalBody>
    <Typography>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
      doloribus vero officia molestias quam animi dolor atque temporibus,
      voluptatibus inventore, fugiat minima consectetur veniam repudiandae
      voluptas iusto nostrum. Enim, quos.
    </Typography>
    <Typography>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
      doloribus vero officia molestias quam animi dolor atque temporibus,
      voluptatibus inventore, fugiat minima consectetur veniam repudiandae
      voluptas iusto nostrum. Enim, quos.
    </Typography>
  </ModalBody>

  <ModalDivider></ModalDivider>

  <ModalFooter classes="justify-between">
    <Button variant="ghost" color="primary">
      Cancel
    </Button>
    <Button variant="filled" color="primary">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

Size​

There are three modal sizes: small, medium and large. You can use this property to control size of buttons and font size of icons and title in modal.

<Modal open size="small">
  <ModalHeader closeIcon>
    <ModalTitle>
      <Icon icon="info" variant="outlined"></Icon>
      <div>
        <Typography>Dialog modal</Typography>
        <ModalSubtitle>Caption placeholder</ModalSubtitle>
      </div>
    </ModalTitle>
  </ModalHeader>

  <ModalBody>
    <!-- ... -->
  </ModalBody>

  <ModalDivider></ModalDivider>

  <ModalFooter classes="justify-between">
    <Button variant="ghost" color="primary">
      Cancel
    </Button>
    <Button variant="filled" color="primary">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

Custom action buttons​

You can use utility classes to style footer layout.

<Modal open>
  // ...
  <ModalFooter classes="flex-col space-y-xs">
    <Button variant="ghost" color="primary" classes="w-full justify-center">
      Cancel
    </Button>
    <Button variant="filled" color="primary" classes="w-full justify-center">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

API​

The Modal component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

ModalBody​

The ModalBody component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

ModalDivider​

The ModalDivider component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, ModalDivider doesn't accept any children.

Loading API documentation...

ModalFooter​

The ModalFooter component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

ModalHeader​

The ModalHeader component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

ModalSubtitle​

The ModalSubtitle component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

ModalTitle​

The ModalTitle component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab