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

  • qtm-modal-overlay: a screen overlay that obscures the on-page content.
  • qtm-modal-content: a centered container, in which you can include any content. This container is composed of divider and three distinct zones: A header, the body, and a footer.
  • 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
<button class="qtm-button qtm-filled qtm-primary">Button</button>

<div class="qtm-modal">
<div class="qtm-modal-overlay"></div>

<div class="qtm-modal-content">
<div class="qtm-modal-header">
<div class="qtm-modal-title">
<i
class="qtm-icon material-icons text-primary-500 dark:text-bluegrey-25"
>warning</i
>
<div>
<p>Dialog Modal</p>
<p class="qtm-modal-subtitle">Caption placeholder</p>
</div>
</div>
<button class="qtm-button qtm-primary qtm-ghost">
<i class="qtm-material-icons qtm-icon">close</i>
</button>
</div>

<div class="qtm-modal-body">
<p>
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.
</p>
<p>
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?
</p>
</div>

<div class="qtm-modal-divider"></div>

<div class="qtm-modal-footer qtm-justify-between">
<button class="qtm-button qtm-primary qtm-ghost">Cancel</button>
<button class="qtm-button qtm-primary qtm-filled">Confirm</button>
</div>
</div>
</div>

Size

There are three .qtm-modal-header sizes: .qtm-small, .qtm-medium and .lqtm-arge. You can use these classes to control font size of icon and title in modal header.

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
<button class="qtm-button qtm-filled qtm-primary">Modal small</button>

<div class="qtm-modal">
<div class="qtm-modal-overlay"></div>

<div class="qtm-modal-content">
<div class="qtm-modal-header qtm-small">
<div class="qtm-modal-title">
<i
class="qtm-icon material-icons text-primary-500 dark:text-bluegrey-25"
>warning</i
>
<div>
<p>Dialog Modal</p>
<p class="qtm-modal-subtitle">Caption placeholder</p>
</div>
</div>
<button class="qtm-button qtm-primary qtm-ghost qtm-small">
<i class="material-icons qtm-icon">close</i>
</button>
</div>

<div class="qtm-modal-body">...</div>

<div class="qtm-modal-divider"></div>

<div class="qtm-modal-footer justify-between">
<button class="qtm-button qtm-primary qtm-ghost qtm-small">Cancel</button>
<button class="qtm-button qtm-primary qtm-filled qtm-small">Confirm</button>
</div>
</div>
</div>

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
<div class="qtm-modal">
...
<div class="qtm-modal-footer flex-col space-y-xs">
<button class="qtm-button qtm-primary qtm-ghost w-full justify-center">Cancel</button>
<button class="qtm-button qtm-primary qtm-filled w-full justify-center">Confirm</button>
</div>
</div>
</div>