## Bottom Modal

Required Imports
``

Component | Demo
--- | ---
`` | With Loader
`` | With Secondary Button
`` | With Back & Close Button
`` | With Cancel Button
`` | Modal With Dynamic Header Left Right With Dynamic Header
`` | Modal With Confirmation option Show Confirmation Modal With Confirmation option
`` | You can update the --lib-max--content-height CSS property to control the max content height. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Adapt To Content Height

Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | breakpoints | An array of breakpoints that define the modal's snap points. | 0, 0.25, 0.5, 0.75 | false
Input | initialBreakpoint | The initial breakpoint where the modal should open. | 0 | false
Input | isOpen | Controls whether the modal is open or closed. When set, it triggers modal visibility. | n/a | true
Input | canDismiss | Determines if the modal can be dismissed. | true | true
Input | showArrow | Shows or hides an arrow in the modal header. | true | false
Input | showBackBtn | Displays a back button in the modal if set to true. | n/a | false
Input | showCloseBtn | Displays a close button in the modal if set to true. | false
Input | loading | Controls a loading state within the modal. | n/a | false
Input | showHeaderSeparator | Shows or hides a separator in the header. | true | false
Input | title | Defines the title text of the modal. | n/a | true
Input | description | Sets a description for the modal. | n/a | false
Input | submitButtonTitle | Defines the text for the submit button. | n/a | false
Input | secondaryButtonTitle | Defines the text for the secondary button. | n/a
Input | cancelButtonTitle | Defines the text for the cancel button. | n/a | false
Input | validModal | Indicates if the modal is valid for submission. | true | false
Input | adaptToContentHeight | If true, the modal adjusts its height based on content. | true | false
Input | customClass | Applies a custom CSS class to the modal for styling. | n/a | false
Input | showConfirm | show Confirm modal | false
Input | confirmationTitle | Confirm modal title | n/a
Input | confirmationMsg | Confirm modal message | n/a
Input | confirmButton | Confirm Button title | n/a
Input | confirmCancelButton | Confirm Cancel Button title | n/a
Output | isOpenChange | Event emitter that emits when the modal's open state changes. | n/a | true
Output | breakpointChange | Emits the current breakpoint when it changes. | n/a | false
Output | closeModal | Emits when the modal is closed. | n/a | true
Output | submitModal | Emits when the submit button is clicked. | n/a | false
Output | backClick | Emits when the back button is clicked. | n/a | false
Output | secondaryButtonClick | Emits when the secondary button is clicked. | n/a
Output | showConfirm | Emits when the confirmation modal confirm/cancel button click. | n/a
Output | confirmEvent | Emits when the confirmation modal confirm button click. | n/a

CSS Properties

Name | Default Value
--- | ---
--lib-popup-modal-radius | 16px 16px 0 0
--lib-popup-modal-shadow | 5px 5px 95px 0px rgba(255, 255, 255, 0.32), -3px -3px 16px 0px rgba(255, 255, 255, 0.10)
--lib-popup-modal-background | #28252D
--lib-popup-modal-color | #A8A8A8
--lib-popup-modal-font | Gilroy-Regular, serif
--lib-popup-modal-title-font | Gilroy-Regular, serif
--lib-popup-modal-title-font-size | 14px
--lib-popup-modal-title-arrow-icon-color | #F7416E
--lib-popup-modal-progress-bar-color | #F7416E
--lib-popup-modal-progress-bar-background-color | #4b494f
--lib-bottom-modal-max-width | 500px
--lib-popup-modal-loading-spinner-color | #fe638e
--ib-popup-modal-loading-spinner-height | 70px
--ib-popup-modal-loading-spinner-width | 70px
--lib-max--content-height | 72vh

Modal with a loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.