Drawer

const [isOpen, setIsOpen] = useState(false);
<>
  <Button label="Open drawer" onClick={() => setIsOpen(true)} />
  <Drawer
    isOpen={isOpen}
    onOpenChange={setIsOpen}
    label="Details"
    hasScrim={false}
    width={360}>
    <Section padding={4}>
      <VStack gap={2}>
        <Heading level={3}>Details</Heading>
        <Text type="body">The page behind stays interactive.</Text>
        <Button
          label="Close"
          variant="secondary"
          onClick={() => setIsOpen(false)}
        />
      </VStack>
    </Section>
  </Drawer>
</>
// Non-modal: no scrim, no focus trap. In a real master-detail flow, derive
// the open state from the selection — isOpen={selected != null} — and clear
// the selection in onOpenChange.

const [isOpen, setIsOpen] = useState(false);
<Drawer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  label="Navigation"
  side="start">
  <NavPanel />
</Drawer>
// 'start' is left in LTR and mirrors under RTL; 'end' (the default) is the
// inspector convention.

const [isOpen, setIsOpen] = useState(false);
<Drawer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  label="Details"
  width="50%">
  <DetailsPanel />
</Drawer>
// A number is pixels (width={320}); a string is any CSS length ('32rem',
// '50%'). The budget also caps the drawer on mobile.

const [isOpen, setIsOpen] = useState(false);
<Drawer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  label="Filters"
  width={360}>
  <FilterControls />
</Drawer>
// Below 640px the panel preserves a 56px reveal of the page behind (still
// capped by width), so the drawer reads as an overlay, not a navigation.

const [isOpen, setIsOpen] = useState(false);
<Drawer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  label="Filters"
  width={560}
  isFullWidthOnMobile>
  <FilterControls />
</Drawer>

const [openModal, setOpenModal] = useState(false);
const [openPanel, setOpenPanel] = useState(false);
<>
  {/* Modal (default): the scrim dims the page, focus is trapped, and a
      scrim click closes. */}
  <Drawer isOpen={openModal} onOpenChange={setOpenModal} label="Edit details">
    <EditForm />
  </Drawer>
  {/* Non-modal: no scrim, no focus trap; the page behind stays interactive. */}
  <Drawer
    isOpen={openPanel}
    onOpenChange={setOpenPanel}
    label="Details"
    hasScrim={false}>
    <DetailsPanel />
  </Drawer>
</>

const [order, setOrder] = useState(null);
const [lineItem, setLineItem] = useState(null);
<>
  <Drawer
    isOpen={order != null}
    onOpenChange={isOpen => !isOpen && setOrder(null)}
    label="Order details"
    hasScrim={false}>
    <OrderDetails order={order} onSelectLineItem={setLineItem} />
  </Drawer>
  <Drawer
    isOpen={lineItem != null}
    onOpenChange={isOpen => !isOpen && setLineItem(null)}
    label="Line item"
    hasScrim={false}>
    <LineItemDetails item={lineItem} />
  </Drawer>
</>
// Last-opened stacks on top; Escape closes the line item first.