components
Modal
v.1.0.0 | SaturnImport
12345678910
import { Modal } from '@kubit-ui-web/react-components'; <Modal variant="DEFAULT" title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }} content="Content" open={true} footer={{ variant: 'DEFAULT', }} popover={{
Props
Let's delve into the versatility of the modal component by examining its available props:
Note that the modal component's default styling properties can be moderately adjusted through the ctv an cts props, in case the project do not need a full variant customization. This limited customization ensures a seamless balance between predefined aesthetic and your specific design requirements. Additionally, it's essential to highlight that Kubit always provided the option to full customized all the variants that your project needs.
Uncontrolled
| Property | Description | Type | Default |
|---|---|---|---|
variant Required | Variant of modal | String | - |
| portalId | Id used for Portal created | string | - |
| onClose | Function trigger when close modal icon is pressed | () => void | - |
| maxHeight | Maximum height of the modal | String | - |
| minHeight | Minimum height of the modal | String | - |
| maxWidth | Maximum width of the modal | String | - |
| minWidth | Minimum width of the modal | String | - |
| minContentHeight | Minimum height of the content modal | String | - |
| customHeightAllDevices | Active custom height for all Devices | Boolean | false |
| customWidthAllDevices | Active custom width for all Devices | Boolean | false |
| id | String used for modal id | String | - |
| open | Indicates if modal is open or not | Boolean | - |
| popover | Object to configure the popover in case it is necessary | ModalPopoverType | - |
| blocked | If it is true, the component won't be closed by clicking outside | Boolean | - |
| title | Title of the modal | ModalTitleTextType | - |
| closeIcon | Icon to close the modal | IElementOrIcon | - |
| closeText | Button to close Modal | ModalButtonType | - |
| imageIllustrationHeader | Modal header illustration | IElementOrillustration | - |
| imageHeader | Image in modal header | IElementOrIcon | - |
| content | This will appear in your modal | ReactNode | - |
| footer | Footer of the modal | ModalFooterType | - |
| animationExecution | CssAnimation execute option | CssAnimationExecuteOption | - |
| onKeyDown | Function trigger when key is pressed | KeyboardEventHandler | - |
| dataTestId | Test id of the modal. Internal components will concatenate from this test id | String | modalDataTestId |
| ctv | Modify styles for the default version of the component | ModalBaseStylesType | - |
Controlled
| Property | Description | Type | Default |
|---|---|---|---|
variant Required | Variant of modal | String | - |
| portalId | Id used for Portal created | string | - |
| maxHeight | Maximum height of the modal | String | - |
| minHeight | Minimum height of the modal | String | - |
| maxWidth | Maximum width of the modal | String | - |
| minWidth | Minimum width of the modal | String | - |
| minContentHeight | Minimum height of the content modal | String | - |
| customHeightAllDevices | Active custom height for all Devices | Boolean | false |
| customWidthAllDevices | Active custom width for all Devices | Boolean | false |
| id | String used for modal id | String | - |
| open | Indicates if modal is open or not | Boolean | - |
| popover | Object to configure the popover in case it is necessary | ModalPopoverType | - |
| blocked | If it is true, the component won't be closed by clicking outside | Boolean | - |
| title | Title of the modal | ModalTitleTextType | - |
| closeIcon | Icon to close the modal | IElementOrIcon | - |
| closeText | Button to close Modal | ModalButtonType | - |
| imageIllustrationHeader | Modal header illustration | IElementOrillustration | - |
| imageHeader | Image in modal header | IElementOrIcon | - |
| content | This will appear in your modal | ReactNode | - |
| footer | Footer of the modal | ModalFooterType | - |
| animationExecution | CssAnimation execute option | CssAnimationExecuteOption | - |
| onKeyDown | Function trigger when key is pressed | KeyboardEventHandler | - |
| dataTestId | Test id of the modal. Internal components will concatenate from this test id | String | modalDataTestId |
| ctv | Modify styles for the default version of the component | ModalBaseStylesType | - |