pleate.ui
Overlay

Drawer

A panel that slides in from an edge: details, filters or a short sheet from the bottom. Same parts as Modal.
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from "pleate/drawer";

End, start and bottom

Props

Drawer

Radix Dialog root.

open, defaultOpen, onOpenChange

DrawerContent side

Edge it slides from. Start and end follow the text direction.

"start" | "end" | "bottom"default "end"

DrawerContent size

Width for side panels, max height for bottom.

"sm" | "md" | "lg"default "md"

ModalContent showClose

Round close button in the corner.

booleandefault true

ModalContent closeLabel

Its accessible name.

stringdefault "Close"

ModalHeader icon / danger

Soft round icon tile before the title, like AlertDialog; danger turns it red.

ReactNode / boolean

Accessibility

  • Focus is trapped inside and returns to the trigger.
  • Escape and backdrop click close it; the page behind can't scroll.
  • Labelled by DrawerTitle, described by DrawerDescription.