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

• QtmModalHeader which usually contains a title QtmModalTitle, a subtitle QtmModalSubtitle, and the close icon.
• QtmModalBody which contains the information and/or controls needed to complete the modal’s task. It can include message text and components.
• QtmModalDivider which is divider between body and footer.
• QtmModalFooter 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

<QtmModal open>
  <QtmModalHeader closeIcon>
    <QtmModalTitle>
      <QtmIcon
        icon="warning"
        classes="text-primary-500 dark:text-bluegrey-25"
      ></QtmIcon>
      <div>
        <QtmTypography>Dialog modal</QtmTypography>
        <QtmModalSubtitle>Caption placeholder</QtmModalSubtitle>
      </div>
    </QtmModalTitle>
  </QtmModalHeader>

  <QtmModalBody>
    <QtmTypography>
      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.
    </QtmTypography>
    <QtmTypography>
      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.
    </QtmTypography>
  </QtmModalBody>

  <QtmModalDivider></QtmModalDivider>

  <QtmModalFooter classes="justify-between">
    <QtmButton variant="ghost" color="primary">
      Cancel
    </QtmButton>
    <QtmButton variant="filled" color="primary">
      Confirm
    </QtmButton>
  </QtmModalFooter>
</QtmModal>

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

<QtmModal open size="small">
  <QtmModalHeader closeIcon>
    <QtmModalTitle>
      <QtmIcon
        icon="warning"
        classes="text-primary-500 dark:text-bluegrey-25"
      ></QtmIcon>
      <div>
        <QtmTypography>Dialog modal</QtmTypography>
        <QtmModalSubtitle>Caption placeholder</QtmModalSubtitle>
      </div>
    </QtmModalTitle>
  </QtmModalHeader>

  <QtmModalBody>...</QtmModalBody>

  <QtmModalDivider></QtmModalDivider>

  <QtmModalFooter classes="justify-between">
    <QtmButton variant="ghost" color="primary">
      Cancel
    </QtmButton>
    <QtmButton variant="filled" color="primary">
      Confirm
    </QtmButton>
  </QtmModalFooter>
</QtmModal>

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

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

API

QtmModal

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
open	boolean	false	If true, the modal is displayed
overlay	boolean	true	If false, the overlay modal is transparent
overlayStyle	string		list 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

Event	Type	Description
onCloseModal	CustomEvent<any>	Callback fired when the modal is closed

QtmModalHeader

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
closeIcon	boolean	true	if true, a close button is displayed
size	"large" | "medium" | "small"		the size of the modal header

Event	Type	Description
onClosedButton	CustomEvent<any>	callback fired when the close button is clicked

QtmModalTitle

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmModalSubtitle

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmModalBody

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmModalDivider

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmModalFooter

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing