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"
                rounding="medium"
                shadow="light"
                onClose={() => setOpen(false)}
                closeOnOverlayClick={true}
                closeOnEscape={true}
                closeButtonAriaLabel="Close drawer"
              >
                <p>Drawer content for settings, filters, or details.</p>
              </Drawer>

solid variant

solid-variant.tsx

<Drawer variant="solid" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

outline variant

outline-variant.tsx

<Drawer variant="outline" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

glass variant

glass-variant.tsx

<Drawer variant="glass" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

primary theme

primary-theme.tsx

<Drawer theme="primary" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

secondary theme

secondary-theme.tsx

<Drawer theme="secondary" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

tertiary theme

tertiary-theme.tsx

<Drawer theme="tertiary" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

quaternary theme

quaternary-theme.tsx

<Drawer theme="quaternary" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

success state

success-state.tsx

<Drawer state="success" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

warning state

warning-state.tsx

<Drawer state="warning" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

error state

error-state.tsx

<Drawer state="error" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

info state

info-state.tsx

<Drawer state="info" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

left placement

left-placement.tsx

<Drawer placement="left" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

right placement

right-placement.tsx

<Drawer placement="right" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

top placement

top-placement.tsx

<Drawer placement="top" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</p>
</Drawer>

bottom placement

bottom-placement.tsx

<Drawer placement="bottom" open={open} onClose={() => setOpen(false)} title="Workspace settings">
  <p>Choose the filters and preferences for your workspace.</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.