Drawer
A drawer is a component that slides in from the side of the screen. It is typically used to display additional content, such as a detail view or a list of options.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { Drawer } from 'bio-bind-ui';<Drawer
id='drawer'
mode='light'
onClickBack={() => {}}
size='md'
subtitle='Subtitle'
title='Drawer Title'
/>Examples
Size
Use size for change the width size of drawer component: sm, md, lg, xl, full
Placement
Use placement for change position of drawer: left or right
Mode (Optional)
Use mode for change the color mode of drawer component: light or dark
Props
| Props | Required | Default | Type | Description |
|---|---|---|---|---|
| id | false | - | string | The unique identifier for the Drawer component. Useful for targeting specific elements. |
| title | false | - | string | The title of the Drawer. |
| subtitle | false | - | string | The subtitle of the Drawer. |
| children | false | - | React.ReactNode | The content inside the Drawer. |
| isOpen | false | false | boolean | Indicates whether the Drawer is open or closed. |
| onClose | false | - | () => void | A function called when the Drawer is closed. |
| placement | false | left | top, right, bottom, left | The placement of the Drawer, determining which side of the screen it will appear on. |
| mode | false | light | light, dark | The mode of the Drawer, either light or dark theme. |
| size | false | md | xs, sm, md, lg, xl, full | The size of the Drawer, ranging from extra small to full width. |
| className | false | - | string | The class name of the Drawer component for styling. |
| footerActions | false | - | React.ReactNode | The footer actions inside the Drawer, typically buttons or links. |
| customHeader | false | - | React.ReactNode | A custom header for the Drawer, allowing custom elements or content. |
| isShowBackButton | false | false | boolean | Indicates whether a back button should be shown in the Drawer. |
| onClickBack | false | - | () => void | A function called when the back button is clicked in the Drawer. |