Drawer

A responsive overlay panel that renders as a bottom sheet on mobile and a centered modal on desktop. Features smooth enter/exit animations, backdrop overlay, Escape key dismissal, and scroll locking.

Import

import { Drawer } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

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

<>
  <Button onClick={() => setOpen(true)}>Open Drawer</Button>
  <Drawer open={open} onClose={() => setOpen(false)} title="Drawer Title">
    <p>Drawer content goes here.</p>
  </Drawer>
</>

Props

Prop	Type	Default	Description
`open`*	boolean	-	Whether the drawer is visible.
`onClose`*	() => void	-	Callback invoked when the drawer should close (backdrop click, Escape key).
`children`*	ReactNode	-	Content rendered inside the drawer body.
`title`	string	-	Title displayed in the drawer header.
`className`	string	-	Additional CSS class for the drawer panel.