Overview
For design guidance, see the page on modals .Usage
With description
To show information, warnings, or notifications.
With enabled / disabled submit
Modal with checkbox, submit, and cancel buttons.
With predefined sizes
There are three predefined modal sizes.
With precise size
Modal with 600px width.
With custom actions
Use actions slot to override the default buttons.
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 |