Dottiv1.1
← Components

Drawer

Component

Slide-out panel that can be positioned from any side of the screen.

Installation & Usage

Basic Usage
import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from 'dotti'

<Drawer isOpen={isOpen} onClose={handleClose} position="right">
  <DrawerHeader>Title</DrawerHeader>
  <DrawerContent>Content</DrawerContent>
  <DrawerFooter>Actions</DrawerFooter>
</Drawer>

Examples

Basic Drawer

Simple drawer with header, content, and footer sections.

Code
const [isOpen, setIsOpen] = useState(false)

<Button onClick={() => setIsOpen(true)}>
  Open Drawer
</Button>

<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} position="right">
  <DrawerHeader>
    <h2>Drawer Title</h2>
  </DrawerHeader>
  <DrawerContent>
    <p>This is the drawer content area.</p>
  </DrawerContent>
  <DrawerFooter>
    <Button onClick={() => setIsOpen(false)}>Close</Button>
  </DrawerFooter>
</Drawer>

Drawer Positions

Drawer can slide in from any side of the screen.

Code
<Drawer position="left">
  <DrawerContent>Left side drawer</DrawerContent>
</Drawer>

<Drawer position="right">
  <DrawerContent>Right side drawer</DrawerContent>
</Drawer>

<Drawer position="top">
  <DrawerContent>Top drawer</DrawerContent>
</Drawer>

<Drawer position="bottom">
  <DrawerContent>Bottom drawer</DrawerContent>
</Drawer>

Drawer with Form

Common use case - drawer containing a form with actions.

Code
<Drawer isOpen={isOpen} onClose={handleClose}>
  <DrawerHeader>
    <h2>Edit Profile</h2>
  </DrawerHeader>
  <DrawerContent>
    <Stack spacing="lg">
      <Input label="Full Name" placeholder="John Doe" />
      <Input label="Email" placeholder="john@example.com" />
      <Select label="Role" options={roleOptions} />
      <Checkbox label="Send notifications" />
    </Stack>
  </DrawerContent>
  <DrawerFooter>
    <Stack direction="row" spacing="sm" justify="end">
      <Button variant="ghost" onClick={handleClose}>Cancel</Button>
      <Button variant="primary" onClick={handleSave}>Save</Button>
    </Stack>
  </DrawerFooter>
</Drawer>

Props