Drawer
import { Drawer } from '@enmovil/ui-design-system';
A panel that slides in from an edge of the screen. Open and close it with isOpen and onClose, and set the edge with placement.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
content | ReactNode | Yes | — | — | The content to display inside the drawer |
title | string | No | — | — | Title for the modal |
isOpen | boolean | Yes | — | — | Controls whether the modal is visible or not |
variant | string | No | 'default' | 'primary', 'default', 'secondary' | Controls the button style. It can be "default", "primary", or "secondary". |
size | string | No | 'default' | 'default', 'large' | Preset size of the drawer, default (the default) or large for a wider panel (taller when it opens from the top or bottom). |
destroyOnClose | boolean | No | — | — | Whether to destroy the modal when it is closed. |
placement | string | No | 'right' | 'left', 'right', 'top', 'bottom' | Controls the placement of the modal. Options: "top", "right", "bottom", "left". |
keyboard | boolean | No | — | — | Whether the drawer can be closed by pressing the ESC key. |
maskClosable | boolean | No | — | — | Whether clicking the mask (background overlay) closes the drawer. |
closable | boolean | ({ closeIcon?: ReactNode; disabled?: boolean; } & AriaAttributes & { placement?: "start" | "end"; }) | undefined | No | — | — | Whether the drawer can be closed by clicking the close button in the top-right corner. |
Other attributes
Drawer passes 94 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClose | () => void | Callback to close the modal |
onOpen | (() => void) | Fires when isOpen becomes true, including on mount when the drawer starts open. It reports the opening; it does not open the drawer, so it should not toggle isOpen. To act once the open animation has finished, use afterOpenChange. |
afterOpenChange | ((open: boolean) => void) | Fires once the open or close animation has finished. Use it to focus a field after opening or to reset state after closing. |
Children
Drawer does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Slider Modal example.
Loading playground…
Storybook
Open Drawer in Storybook to try every story with the full set of controls.