FMX Prototype Pipeline

Sheet

Side panel with header (title + description + close), scrollable body, optional footer.

Placement

Viewport

<Sheet
  title="Request details"
  description="Review and update the maintenance request."
  side="right"
  onClose={() => setOpen(false)}
  footer={
    <>
      <Button variant="outline">Cancel</Button>
      <Button>Save changes</Button>
    </>
  }
>
  <p>
    Body content goes here — form fields, item details, etc.
  </p>
</Sheet>

Props

title:string

Panel title rendered as text-heading-2.

description:string

Optional sub-title / description line below title.

side:"right" | "left"= "right"

Which edge the panel attaches to.

showCloseButton:boolean= true

Render the × close IconButton in the header.

onClose:() => void

Called when the close button is clicked.

footer:ReactNode

Footer content (e.g. primary + cancel buttons).

children:ReactNode

Body content — rendered in the scrollable middle section.