ComponentsUpdated Sep 9, 2026

Popover

Non-modal content anchored to a trigger. Content wraps the portal, positioner, and popup and exposes the positioning props you actually change.

Import

Source: packages/ui/src/components/popover

tsx

import { Popover } from '@highlight/ui'

Basic

Pass a Button through render so the trigger is a single element.

tsx

import { Button, Popover } from '@highlight/ui'

export default function PopoverBasic() {
  return (
    <Popover>
      <Popover.Trigger render={<Button>Share</Button>} />
      <Popover.Content className="w-64">
        <Popover.Title>Share this summary</Popover.Title>
        <Popover.Description>Anyone with the link can read it. Editing stays with attendees.</Popover.Description>
      </Popover.Content>
    </Popover>
  )
}

Sides and arrow

tsx

import { Button, Popover } from '@highlight/ui'

const SIDES = ['top', 'right', 'bottom', 'left'] as const

export default function PopoverPositions() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {SIDES.map((side) => (
        <Popover key={side}>
          <Popover.Trigger
            render={
              <Button size="small" variant="secondary" className="capitalize">
                {side}
              </Button>
            }
          />
          <Popover.Content side={side} showArrow>
            <p className="text-sm capitalize">{side}</p>
          </Popover.Content>
        </Popover>
      ))}
    </div>
  )
}

With backdrop

tsx

import { Button, Popover } from '@highlight/ui'

export default function PopoverBackdrop() {
  return (
    <Popover>
      <Popover.Trigger render={<Button variant="bold">With backdrop</Button>} />
      <Popover.Content showBackdrop className="w-60">
        <p className="text-sm">The page dims and the popover reads as modal.</p>
        <div className="-mx-4 -mb-4 mt-3">
          <Popover.Close className="rounded-b-xl">Close</Popover.Close>
        </div>
      </Popover.Content>
    </Popover>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Popover.Trigger: Unstyled trigger; use render to supply a Button.
Popover.Content: side, sideOffset, align, alignOffset, anchor, showArrow, showBackdrop, initialFocus.
Popover.Title / Description: Accessible name and body copy.
Popover.Close: Full-width close row for the bottom of a popup.
Popover.Portal / Positioner / Popup / Arrow / Backdrop: Low-level parts.