EnModal
Preview
Props
| Name | Description | Default | Control |
|---|---|---|---|
| qaId | Id that can be set for automation selectors. string | "" | |
| size | The width of the modal. string | "md" | |
| title | Sets the title in the modal header. string | "" | |
| showFooter | Renders the modal footer and footer slot. boolean | true | |
| showHeader | Renders the modal header and header slot. boolean | true | |
| showSuccessBtn | Shows the success button in the footer. boolean | true | |
| canClose | Allows the modal to be closed using the close buttons. boolean | true | |
| showModal | Displays the modal. Should be controlled outside of the modal component. boolean | false | |
| closeOnClickOutside | Prevents modal from closing when clicking outside of the modal. boolean | true | |
| modalContentElement | Changes the container element of the modal content. string | "div" | |
| btnSuccessText | Sets text for the success button. string | "Save" | |
| btnCancelText | Sets text for the cancel button. string | "Cancel" | |
| bodyScroll | Applies a scrollbar to the body of the modal when the content gets too long. boolean | false | |
| trapFocus | Locks Tab navigation inside the modal while it is open. Tab order follows DOM order: header → body → footer, then wraps. Restores focus to the previously-focused element on close. boolean | true |
Slots
header
Replaces the `modal-title` div.
title
Sets the content inside the `modal-title` div.
content
Replaces both the `modal-body` and `modal-footer` divs.
body
Sets the content inside the `modal-body` div.
footer
Replaces the buttons inside the `modal-footer` div.
Events
close
Fires when the modal closes. Should be used to set the `showModal` prop back to false if used.
open
Fires when the modal opens.
save
This is triggered with the default save button. Emits save event with the close modal method as an arg.
Payload
| Name | Type | Description |
|---|---|---|
closeModal | function | function that will close the modal if called. |
Methods
No methods defined.