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

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. Nulla, tempore
pariatur consectetur id autem ducimus odio harum, soluta quos illum
placeat adipisci sunt quaerat explicabo hic dolores quidem quam
neque.</qtm-typography
>
<qtm-typography
>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?</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

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

qtm-modal-header

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

qtm-modal-title

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

qtm-modal-subtitle

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

qtm-modal-body

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

qtm-modal-divider

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

qtm-modal-footer

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