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 QtmModal is a main container with the following structure:
QtmModalHeaderwhich usually contains a titleQtmModalTitle, a subtitleQtmModalSubtitle, and the close icon.QtmModalBodywhich contains the information and/or controls needed to complete the modal’s task. It can include message text and components.QtmModalDividerwhich is divider between body and footer.QtmModalFooterwhich contains the main actions needed to complete or cancel the dialog task.
<QtmModal open>
<QtmModalHeader closeIcon>
<QtmModalTitle>
<QtmIcon icon="info" variant="outlined"></QtmIcon>
<div>
<QtmTypography>Dialog modal</QtmTypography>
<QtmModalSubtitle>Caption placeholder</QtmModalSubtitle>
</div>
</QtmModalTitle>
</QtmModalHeader>
<QtmModalBody>
<QtmTypography>
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.
</QtmTypography>
<QtmTypography>
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.
</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 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.
<QtmModal open size="small">
<QtmModalHeader closeIcon>
<QtmModalTitle>
<QtmIcon icon="info" variant="outlined"></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.
<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
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