Drawer

PreviousNext

Side panel. Prefer controlled open + React children.

import { Drawer, Button } from "@/rl-ui";

<Drawer
placement="right"
size={420}
title="Details"
trigger={<Button variant="secondary">Open drawer</Button>}
content={<p>Detail body</p>}
/>

Examples

Placements

import { Drawer, Button } from "@/rl-ui";

<>
<Drawer placement="right" title="Right" trigger={<Button>Right</Button>} content="Body" />
<Drawer placement="left" title="Left" trigger={<Button>Left</Button>} content="Body" />
<Drawer placement="bottom" title="Bottom" trigger={<Button>Bottom</Button>} content="Body" />
</>

API

PropTypeDefaultDescription
placement"left" | "right" | "top" | "bottom""bottom"Edge the drawer enters from.
sizenumber400Panel size in px (horizontal drawers).
openboolean—Controlled open state.
titleReactNode—Header title.
descriptionReactNode—Header description.
contentReactNode—Body content.
footerReactNode—Footer actions.
triggerReactNode—Element that opens the drawer.
closablebooleantrueShow close control.
overlayClosablebooleantrueClick outside to close.