Drawer

A modal side panel for quickly viewing or editing a record without leaving the current ERP list or workflow.

Default

The default drawer opens from the logical end side, traps focus, and restores focus to its trigger when closed.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open drawer</Button>
<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Customer details"
>
  Customer record content
</Drawer>

Installation

tsx

import { Drawer } from "madagent";

Logical Sides

Use end for the common record-detail pattern or start for navigation and filtering surfaces. Both values flip automatically in RTL.

tsx

<Drawer side="end" ...>Record details</Drawer>
<Drawer side="start" ...>Filters</Drawer>

Sizes

Choose a width based on the content density: 24rem, 32rem, or 40rem, always clamped to the viewport.

tsx

<Drawer size="sm" ... />
<Drawer size="md" ... />
<Drawer size="lg" ... />

Long Content

The body scrolls independently while the header and action footer remain available.

tsx

<Drawer
  open={open}
  onClose={close}
  title="Audit history"
  actions={<Button>Done</Button>}
>
  {activity.map(item => <Activity key={item.id} {...item} />)}
</Drawer>

Required Interaction

Set closable to false to remove overlay, Escape, and close-button dismissal. Always provide an explicit completion action.

tsx

<Drawer open={open} onClose={close} closable={false} title="Required review">
  Review the record before continuing.
</Drawer>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	Controls whether the drawer is open
`onClose`	`() => void`	-	Called by enabled dismissal paths
`title`	`ReactNode`	-	Accessible heading displayed in the drawer header
`side`	`"start""end"`	`"end"`	Logical viewport edge the drawer opens from
`size`	`"sm""md""lg"`	`"md"`	Inline-size preset: 24rem, 32rem, or 40rem
`closable`	`boolean`	`true`	Enables the close button, Escape dismissal, and overlay-click dismissal
`actions`	`ReactNode`	-	Sticky action footer content
`children`	`ReactNode`	-	Scrollable drawer body content

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<Drawer
  open={open}
  onClose={close}
  title="تفاصيل العميل"
  side="end"
  actions={<Button>حفظ</Button>}
>
  تظهر اللوحة من النهاية المنطقية.
</Drawer>

const [open, setOpen] = useState(false); <Button onClick={() => setOpen(true)}>Open drawer</Button> <Drawer open={open} onClose={() => setOpen(false)} title="Customer details" > Customer record content </Drawer>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	Controls whether the drawer is open
`onClose`	`() => void`	-	Called by enabled dismissal paths
`title`	`ReactNode`	-	Accessible heading displayed in the drawer header
`side`	`"start""end"`	`"end"`	Logical viewport edge the drawer opens from
`size`	`"sm""md""lg"`	`"md"`	Inline-size preset: 24rem, 32rem, or 40rem
`closable`	`boolean`	`true`	Enables the close button, Escape dismissal, and overlay-click dismissal
`actions`	`ReactNode`	-	Sticky action footer content
`children`	`ReactNode`	-	Scrollable drawer body content

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<Drawer
  open={open}
  onClose={close}
  title="تفاصيل العميل"
  side="end"
  actions={<Button>حفظ</Button>}
>
  تظهر اللوحة من النهاية المنطقية.
</Drawer>