Drawer

To implement Drawer component into your project you’ll need to add the import:

import Drawer from "@kiwicom/orbit-components/lib/Drawer";

After adding import into your project you can use it simply like:

<Drawer shown>Content to show</Drawer>

Props

Table below contains all types of the props available in the Drawer component.

Name	Type	Default	Description
actions	`React.Node`		Actions, especially Buttons, that will be rendered in the Drawer’s header.
children	`React.Node`		The content of the Drawer.
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Sets the `id` attribute for the `Drawer`.
noPadding	`boolean`	`false`	If `true`, the wrapper won’t have any inner padding.
onClose	`() => void \\| Promise`		Function for handling the onClose event.
position	`enum`	`"right"`	The side on which the Drawer should appear.
shown	`boolean`	`"true"`	If `true`, the Drawer will be visible; otherwise, it will be visually hidden but will stay in the DOM.
suppressed	`boolean`	`false`	If `true`, the Drawer will have a cloudy background.
title	`string`		Title of the Drawer that will be rendered in the Drawer’s header. If `ariaLabel` is undefined, this will be used as `aria-label`.
triggerRef	`React.RefObject`		The ref to the element which triggers the Drawer. When the Drawer is closed, focus will return to this element.
width	`string`	`"320px"`	The width of the Drawer.
lockScrolling	`boolean`	`true`	Whether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience.
fixedHeader	`boolean`		If `true`, the DrawerHeader will be fixed to the top.
labelHide	`string`	`Hide`	Label for the close button.
ariaLabel	`string`		Optional prop for `aria-label`.

position
`"right"`
`"left"`