Drawer

The Drawer component is used to display content in a panel that slides in from the side of the screen.

Usage & Examples

Default

default.tsx

<Drawer
              open={open}
              title="Filters"
              placement="right"
              theme="primary"
              glass={false}
              rounding="medium"
              shadow="light"
              onClose={() => setOpen(false)}
              closeOnOverlayClick={true}
              closeOnEscape={true}
              closeButtonAriaLabel="Close drawer"
            >
              <p>Drawer content for settings, filters, or details.</p>
            </Drawer>

Props API

Drawer props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	ARIA Describedby attribute forwarded to the relevant accessible element.
`aria-label`	`string`	No	aria	`—`	ARIA Label attribute forwarded to the relevant accessible element.
`aria-labelledby`	`string`	No	aria	`—`	ARIA Labelledby attribute forwarded to the relevant accessible element.
`bodyClassName`	`string`	No	props	`—`	Additional CSS class names for the body section.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`closeButtonAriaLabel`	`string`	No	props	`"Close drawer"`	Close Button Aria Label.
`closeButtonClassName`	`string`	No	props	`—`	Additional CSS class names for the close button section.
`closeOnEscape`	`boolean`	No	props	`true`	Close On Escape.
`closeOnOverlayClick`	`boolean`	No	props	`true`	Close On Overlay Click.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`footer`	`ReactNode`	No	props	`—`	Custom footer content rendered by the component.