Skip to main content
🏠ComponentsModalVersion: 2.0.0-beta.6

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. Nulla, tempore
pariatur consectetur id autem ducimus odio harum, soluta quos illum
placeat adipisci sunt quaerat explicabo hic dolores quidem quam neque.
</QtmTypography>
<QtmTypography>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi, optio
quibusdam ipsam omnis, eum neque earum corporis mollitia reiciendis sint
molestiae excepturi illo laudantium architecto asperiores quae, culpa
tenetur. Modi?
</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

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

QtmModalTitle

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

QtmModalSubtitle

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

QtmModalBody

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

QtmModalDivider

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