Drawer

Overlay panel that slides in from the screen edge.

Basic Usage

Control visibility with visible and onClose. Defaults to sliding in from the right.

import { Drawer, Button } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [visible, setVisible] = useState(false)

  return (
    <div>
      <Button variant="primary" onClick={() => setVisible(true)}>Right Drawer</Button>
      <Drawer
        visible={visible}
        title="Drawer Title"
        onClose={() => setVisible(false)}
      >
        This is the drawer content area.
      </Drawer>
    </div>
  )
}

Slide from Left

<Drawer
  visible={visible}
  placement="left"
  title="Left Drawer"
  onClose={() => setVisible(false)}
>
  This panel slides in from the left.
</Drawer>

API

Props

Name	Type	Default	Description
visible	boolean	false	Visibility
placement	'left' | 'right' | 'top' | 'bottom'	'right'	Slide direction
width	string	'300px'	Left/right drawer width
height	string	'300px'	Top/bottom drawer height
title	string	--	Title
closable	boolean	true	Show close button
maskClosable	boolean	true	Close on mask click
children	React.ReactNode	--	Body content
onOpen	() => void	--	Drawer opened callback
onClose	() => void	--	Drawer closed callback

Interaction

• Mask fade-in + panel ease-out slide
• Mask click closes
• Esc key closes
• Body scroll locked on open