Modal
The Modal component consists of a container, a header, a body, and a footer. The header contains the title of the modal, the body contains the main content, and the footer contains any buttons or actions.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { Modal } from 'bio-bind-ui';<Modal
id='modal'
labelCancel='Cancel'
labelConfirm='Confirm'
mode='light'
showOverlay
size='lg'
title='Modal Title'
/>Examples
Size
Change size of the modal: xs, sm, md, lg, xl
With No Title
Modal with no title to show
Mode (Optional)
Change mode light or dark
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | true | - | string | Id of the modal |
| mode | false | light | light dark | Light & dark mode of the modal |
| size | false | lg | xs sm md lg xl | Size of the modal |
| showOverlay | false | true | boolean | Show or hide the overlay |
| title | true | - | string | Title of the modal |
| labelCancel | false | cancel | string | Label of the cancel button |
| labelConfirm | false | confirm | string | Label of the confirm button |
| open | false | false | string | Show or hide the modal |
| titleIcon | false | - | string | Title icon of the modal |
| closeIcon | false | - | string | Title icon of the modal |
| onClickClose | true | - | function | Click on the close button |
| onClickCancel | true | - | function | Click on the cancel button |
| onClickConfirm | true | - | function | Click on the confirm button |
| header | false | - | string | Header of the modal |
| body | false | - | string | Body of the modal |
| footer | false | - | string | Footer of the modal |
| style | false | - | CSSProperties | Custom styles for the modal component. |