Skip to content

Modal

The Modal component provides a very basic dialogue window useful for prompting the user to take some action.

Composable Components

The Modal is made up of several components that allow you to compose different types of modal windows.

ComponentDescription
ModalRootThe root component element
ModalContentThe wrapper element that contains all the content of the modal
ModalHeaderThe element that contains the modal header content
ModalBodyThe element that contains the modal body content
ModalFooterThe element that contains the modal footer content
ModalCloseThe trigger button element that closes the modal
ModalActionThe trigger button that can be used to handle a post modal closing event. Typically a submit type routine
ModalOverlayThe browser overlay. Use this is you need to prevent the user from interacting with the ui while the modal is open

Examples

js
const isOpen = ref(false) // toggle this value to make the modal open/close
html
<teleport to="body">
    <ModalRoot v-model="isOpen" @modal-root:close="handleClose" class="top-0 left-0">
        <ModalContent>
            <ModalHeader class="header">
                <h2>Modal Title</h2>
            </ModalHeader>
            <ModalBody class="!p-8">
                <p>
                    Modal body text goes here.
                </p>
            </ModalBody>
            <ModalFooter>
                <ModalClose @modal-close:click="handleClose" class="btn-secondary">Cancel</ModalClose>
                <ModalAction class="!ms-3 btn-primary" @modal-action:click="handleAction">Done</ModalAction>
            </ModalFooter>
        </ModalContent>
        <ModalOverlay />
    </ModalRoot>
</teleport>

A working example of this can be in /frontend/components/PasswordModal/PasswordModal.vue.

ModalRoot

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
modal-root:closeemits when the modal is closed

CSS Classes

ClassDescription
.modal-rootthe class applied to the ModalRoot element

ModalContent

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.modal-contentthe class applied to the ModalContent element

ModalHeader

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.modal-headerthe class applied to the ModalHeader element

ModalBody

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.modal-bodythe class applied to the ModalBody element

ModalFooter

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.modal-footerthe class applied to the ModalFooter element

ModalClose

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
modal-close:clickemits when the modal close button element is clicked

CSS Classes

ClassDescription
.modal-closethe class applied to the ModalClose element

ModalAction

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
modal-action:clickemits when the modal action button element is clicked

CSS Classes

ClassDescription
.modal-actionthe class applied to the ModalAction element