Drawer

Feedback · src/components/Drawer/Drawer.tsx

A panel from the edge, for detail beside what the person was looking at.

Use it where a Modal would be too much: the row stays visible behind it, so the context is not lost. Right for a record's detail, a filter set, a settings panel.

Same dialog semantics as Modal, and the same scrim rule - the click must start and end on the scrim, so a text selection dragged out of the panel does not close it.

Import

import { Drawer } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
open	boolean
title	React.ReactNode
description	React.ReactNode	A line under the title: what this panel is for.
side	'left' | 'right'	Which edge it comes from. right for detail, left for navigation.
footer	React.ReactNode
width	number | string
closeLabel	string
className	string
children	React.ReactNode
onClose	() => void