Drawer

Organism

Side panel sliding in from the screen edge. Left / right placement with focus management and Escape close. Body scroll is locked while open via the shared Overlays useScrollLock hook (iOS rubber-band safe). Accepts closeOnRouteChange (M6 stub).

Preview

Code

const [open, setOpen] = useState(false);
<Button variant="outline" onClick={() => setOpen(true)}>Open Drawer</Button>
<Drawer open={open} onClose={() => setOpen(false)} title="Settings" side="right"
  footer={<><Button variant="outline">Cancel</Button><Button variant="primary">Save</Button></>}>
  <p>Drawer content goes here.</p>
</Drawer>

Preview

Code

<Drawer open={open} onClose={() => setOpen(false)} title="Navigation" side="left">...</Drawer>

Preview

Code

// closeOnRouteChange is accepted in M1 and reserved for M6 router-events integration.
<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Route-aware drawer"
  side="right"
  closeOnRouteChange
>
  ...
</Drawer>

Drawer

Right drawer

Left drawer

Route-aware close (M6 stub)