# BasePopUp
A component as overlay to display messages
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| title | pop up header text | string | - | 'Pop Up' |
| headerId | customize the popup header id. if you are using the header-title slot this should also be set as id on your custom title element | string|number | - | 'popup-title' |
| descriptionElementId | specify the id of the element containing a description - for accessibility only | string | - | '' |
| buttonLeftText | text shown in left button | string | - | 'Cancel' |
| buttonRightText | text shown in right button | string | - | 'Submit' |
| buttonLeftIcon | icon shown in left button | string | - | 'remove' |
| buttonRightIcon | icon shown in right button | string | - | 'check-mark' |
| buttonRightDisabled | disable right button | boolean | - | false |
| closeButtonDisabled | disable close button | boolean | - | false |
| isLoading | if true button loader will be shown | boolean | - | false |
| initialFocusElement | HTMLElement to focus after opening the popup Note: If empty, the header title will be focused by default. If using the slot for a custom header, be sure to define an id attribute with the value popup-titleThe value should be a valid CSS selector. useful IDs: - left-button: popup-left-button- right-button: popup-right-button | string | - | '' |
| fullscreenOnMobile | specify to render component with max height and width | boolean | - | false |
| focusableElements | list of focusable HTML elements using tab key navigation | array | - | ['a[href]', 'button:enabled', 'input:enabled', '*[tabindex]:not([tabindex="-1"])'] |
| disableTabKeyHandler | specify to disable the tab key handler within the component | boolean | - | false |
| showButtonRow | button row visibility | boolean | - | true |
| overlayBackgroundVisible | define if the overlay background should be visible (semitransparent black) | boolean | - | false |
# Events
| Event name | Properties | Description |
|---|---|---|
| close | Event triggered on right top corner close action | |
| button-right | Event triggered with right button | |
| button-left | Event triggered with left button |
# Slots
| Name | Description | Bindings |
|---|---|---|
| header-title | add a custom header title instead of the text defined with the prop title. | header-id string, number - set this id on your custom element as it is used by the aria-labelledby attribute of the pop up container |
| default | slot to fill the body of the box with custom content | |
| button-row | custom button row |
# Demo
A basic example