Sheet

A panel from the edge that keeps the list behind it readable: the request inspector, details.

<Sheet
      trigger={<Button>Open request</Button>}
      title="POST /v1/messages"
      subtitle="req_01JAR4X2KQ"
      size="md"
      modal={false}
      actions={<IconButton icon={icons.copy} aria-label="Copy request id" />}
    >
      {body}
    </Sheet>

import { Sheet } from "@logicplanes/kaeso-ui";

Props

actions
ReactNode
Header actions before the close circle.
children
ReactNode
The sheet's content.
defaultOpen
boolean
Whether it starts open, when the component keeps its own state.
footer
ReactNode
Content at the bottom, usually actions.
inline
boolean
Render without a portal, for documentation and state matrices.
modal
boolean
Keep the page behind interactive (non-modal).
onOpenChange
((open: boolean) => void)
Called when it opens or closes.
open
boolean
Whether it is open, when you control it.
side
"bottom" | "left" | "right"
The edge it slides in from.
size
"md" | "sm" | "lg"
The sheet's width, or its height from the bottom.
subtitle
ReactNode
A mono subtitle for ids: req_01J….
title
ReactNode
The sheet's heading, also its accessible name.
trigger
ReactElement<unknown, string | JSXElementConstructor<any>>
The element that opens it.