Overview
For design guidance, see the page on modals .Usage
Dialog box with description
To show information, warnings, or notifications.
Modal with enabled / disabled submit
Modal with checkbox, submit, and cancel buttons
Modal with predefined sizes
There are three predefined modal sizes.
Modal with precise size
Modal with 600px width
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
title | The title of the modal | string | — | true |
submitText | If provided, text of the submit button | string |
null
| — |
cancelText | If provided, text of the cancel button | string |
null
| — |
submitDisabled | Disable the submit button | boolean |
false
| — |
cancelDisabled | Disable the cancel button | boolean |
false
| — |
size | Width of modal. For consistency use the strings 'small', 'medium', or 'large'.
For more precise control use an integer number of pixels. | string|number |
'medium'
| — |
hasError | Toggles error message indicator in title | boolean |
false
| — |
errorMessage | Error message to be displayed in title | string |
null
| — |
appendToOverlay | Whether or not the modal should be moved
to the overlay container element #k-overlay | boolean |
false
| — |
Events
| Name | Description |
|---|---|
cancel | Emitted when the cancel button is clicked or the esc key is pressed |
submit | Emitted when the submit button or the enter key is pressed |
Slots
| Name | Description |
|---|---|
default | Main content of modal |
actions | Alternative buttons and actions below main content |