Skip to main content
🏠ComponentsModalVersion: Next

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 qtm-modal is a main container with the following structure:

  • qtm-modal-header which usually contains a title qtm-modal-title, a subtitle qtm-modal-subtitle, and the close icon.
  • qtm-modal-body which contains the information and/or controls needed to complete the modal’s task. It can include message text and components.
  • qtm-modal-divider which is divider between body and footer.
  • qtm-modal-footer which contains the main actions needed to complete or cancel the dialog task.
Button
Dialog ModalCaption placeholder
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.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.CancelConfirm
<qtm-modal open>
  <qtm-modal-header close-icon>
    <qtm-modal-title>
      <qtm-icon icon="info" variant="outlined"></qtm-icon>
      <div>
        <qtm-typography>Dialog modal</qtm-typography>
        <qtm-modal-subtitle>Caption placeholder</qtm-modal-subtitle>
      </div>
    </qtm-modal-title>
  </qtm-modal-header>

  <qtm-modal-body>
    <qtm-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.
    </qtm-typography>
    <qtm-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.
    </qtm-typography>
  </qtm-modal-body>

  <qtm-modal-divider></qtm-modal-divider>

  <qtm-modal-footer classes="justify-between">
    <qtm-button variant="ghost" color="primary">Cancel</qtm-button>
    <qtm-button variant="filled" color="primary">Confirm</qtm-button>
  </qtm-modal-footer>
</qtm-modal>

Size​

There are three qtm-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 small
Dialog ModalCaption placeholder
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.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.CancelConfirm
Modal medium
Dialog ModalCaption placeholder
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.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.CancelConfirm
Modal large
Dialog ModalCaption placeholder
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.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.CancelConfirm
<qtm-modal open size="small">
  <qtm-modal-header close-icon>
    <qtm-modal-title>
      <qtm-icon icon="info" variant="outlined"></qtm-icon>
      <div>
        <qtm-typography>Dialog modal</qtm-typography>
        <qtm-modal-subtitle>Caption placeholder</qtm-modal-subtitle>
      </div>
    </qtm-modal-title>
  </qtm-modal-header>

  <qtm-modal-body>
    <!-- ... -->
  </qtm-modal-body>

  <qtm-modal-divider></qtm-modal-divider>

  <qtm-modal-footer classes="justify-between">
    <qtm-button variant="ghost" color="primary">Cancel</qtm-button>
    <qtm-button variant="filled" color="primary">Confirm</qtm-button>
  </qtm-modal-footer>
</qtm-modal>

Custom action buttons​

You can use utility classes to style footer layout.

Button
Dialog ModalCaption placeholder
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.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.CancelConfirm
<qtm-modal open>
  <!-- ... -->
  <qtm-modal-footer classes="flex-col space-y-xs">
    <qtm-button variant="ghost" color="primary" classes="w-full justify-center"
      >Cancel</qtm-button
    >
    <qtm-button variant="filled" color="primary" classes="w-full justify-center"
      >Confirm</qtm-button
    >
  </qtm-modal-footer>
</qtm-modal>

API​

Loading API documentation...

ModalHeader​

Loading API documentation...

ModalTitle​

Loading API documentation...

ModalSubtitle​

Loading API documentation...

ModalBody​

Loading API documentation...

ModalDivider​

Loading API documentation...

ModalFooter​

Loading API documentation...