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 closeIcon>
    <qtm-modal-title>
      <qtm-icon
        icon="warning"
        classes="text-primary-500 dark:text-bluegrey-25"
      ></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 closeIcon>
    <qtm-modal-title>
      <qtm-icon
        icon="warning"
        classes="text-primary-500 dark:text-bluegrey-25"
      ></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

qtm-modal

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
closeModal	CustomEvent<any>	Callback fired when the modal is closed

qtm-modal-header

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
closedButton	CustomEvent<any>	callback fired when the close button is clicked

qtm-modal-title

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

qtm-modal-subtitle

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

qtm-modal-body

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

qtm-modal-divider

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

qtm-modal-footer

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