DWG · 03.03 · COMPONENT SPEC

Popover

A small panel anchored to a trigger — for details, forms, or extra controls that don't warrant a full modal. Base UI handles positioning, focus, and dismissal.

Default

03.03·A
PREVIEWPX · 1:1
<Popover
  title="Sheet info"
  description="Metadata for the active drawing"
  trigger={<Button variant="secondary">Details</Button>}
>
  <div className="flex flex-col gap-1">
    <Annotation>SCALE · 1:50</Annotation>
    <Annotation>REV · 0.1.0</Annotation>
  </div>
</Popover>

Placement

03.03·B
PREVIEWPX · 1:1
<Popover side="right" trigger={<Button variant="secondary">Right</Button>}>
  <p>Anchored to the right of the trigger.</p>
</Popover>
<Popover side="top" trigger={<Button variant="secondary">Top</Button>}>
  <p>Anchored above the trigger.</p>
</Popover>