Modal
Use the KModal component to display critical information or require user interaction while blocking access to the rest of the application.
Critical Information Overlays
TypeScript
KCheckbox(v-model="closeOnOutsideClick") template(#label) Close on Outside Click KButton(@click="openModal") Open Modal KModal(ref="modalRef" :closeOnOutsideClick="closeOnOutsideClick") template(#header) Modal Title template(#content) p Your main content template(#footer) KButton(@click="modalRef.closeModal()") Close
Modal with Combobox
TypeScript
KButton(type="primary" @click="modalRef.openModal()") Open Modal KModal(ref="modalRef") template(#header) Title template(#content) KCombobox(:dataProvider="provider" labelField="label" v-model="selected") template(#footer) KButton(@click="modalRef.closeModal()") Close
Attributes
Configure the KModal component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| v-model / modelValue | boolean | false | Controls modal visibility with two-way data binding. |
| closeOnOutsideClick | Boolean | true | Whether the modal should close when clicking the backdrop |
Events
Listen to these events emitted by the KModal component.
| Name | Payload | Description |
|---|---|---|
| update:modelValue | boolean | Emitted when modal opens or closes. |
Methods
Use template refs to call these methods on the KModal instance.
| Name | Action |
|---|---|
| openModal() | Opens the modal overlay |
| closeModal() | Closes the modal overlay |
Slots
| Name | Description |
|---|---|
| header | Title or custom header region. |
| content | Main dialog body content. |
| footer | Bottom action buttons and confirmation controls. |