warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
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-headerwhich usually contains a titleqtm-modal-title, a subtitleqtm-modal-subtitle, and the close icon.qtm-modal-bodywhich contains the information and/or controls needed to complete the modal’s task. It can include message text and components.qtm-modal-dividerwhich is divider between body and footer.qtm-modal-footerwhich contains the main actions needed to complete or cancel the dialog task.
<qtm-modal open>
<qtm-modal-header closeIcon>
<qtm-modal-title>
<qtm-icon icon="info" variant="outlined"></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 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.
<qtm-modal open size="small">
<qtm-modal-header closeIcon>
<qtm-modal-title>
<qtm-icon icon="info" variant="outlined"></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.
<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
Modal
Loading API documentation...
ModalBody
Loading API documentation...
ModalDivider
Loading API documentation...
ModalFooter
Loading API documentation...
ModalHeader
Loading API documentation...
ModalSubtitle
Loading API documentation...
ModalTitle
Loading API documentation...
lightbulb
Spotted a bug, have a question, or want to suggest a new feature?
Submit an issue on GitLab