## Popup Component

A compact and interactive chip for displaying and interacting with small pieces of information.
Demo
Open Modal
Required Imports
import { LibModalModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Required
--- | --- | --- | ---
Input | isOpen | Controls whether the modal is open or closed. | true
Input | icon | The icon displayed in the modal. | false
Input | title | The title text of the modal. | true
Input | message | The main message or content of the modal. | true
Input | extendedMessage | An optional extended message for additional information. | false
Input | cancelButton | Text for the cancel button in the modal. | true
Input | confirmButton | Text for the confirm button in the modal. | true
Input | checkboxText | Text displayed for the optional checkbox within the modal. | false
Input | progBarCurrentStep | Current step value for a progress bar, if used. | false
Input | progBarTotalSteps | Total steps for a progress bar, if used. | false
Input | customClass | Custom class applied to the modal for styling. | false
Input | backdropDismiss | Determines if the modal can be dismissed by clicking on the backdrop. | false
Input | modalComponent | Component to dynamically load into the modal. | false
Input | modalComponentData | Data passed to the dynamically loaded modal component. | false
Output | modalConfirm | Emits when the confirm button is clicked. | false
Output | modalDismiss | Emits when the modal is dismissed or closed. | false
Output | afterCloseEvent | Emits after the modal is closed. | false

CSS Properties

Name | Default Value
--- | ---
--lib-chip-radius | 20px
--lib-chip-background | #433A47
--lib-chip-background-before | linear-gradient(to left, #FFB5E980, #00000000)
--lib-chip-background-after | linear-gradient(to left, #00000000, #FFB5E980)
--lib-chip-border | 1px solid #FFB5E980
--lib-chip-color | #d9cfcf
--lib-button-component-label-filter | blur(10.081077575683594px)
--lib-chip-font | Gilroy-Regular, serif
--lib-chip-font-size | 12px
--lib-chip-padding | 3px 10px

Example usage
`{{ code }}`