Popover

<Popover><Popover.Trigger render={<Button icon={IconFilter}>Filters</Button>} /><Popover.Content title="Filters" description="Applied to the current view.">  <div className="flex flex-col gap-2">    <Checkbox defaultChecked label="Errors only" />    <Checkbox label="Include previews" />  </div></Popover.Content></Popover>

Three components float above the page, and they do different jobs:

• Tooltip for a label — a few words, no interaction.
• Dropdown for a list of actions.
• Popover for anything with its own layout: filters, a form, a preview, a short explanation with a link in it.

Usage

import { Button, Popover } from "@heyo-sh/heyo-ui";<Popover>  <Popover.Trigger render={<Button>Filters</Button>} />  <Popover.Content title="Filters">…</Popover.Content></Popover>;

Header and close

Passing title (and optionally description) renders the heading block and a close button for you. Without them the popup is a bare surface and you own every pixel of it.

<Popover><Popover.Trigger render={<Button variant="ghost" shape="square" icon={IconInfoCircle} aria-label="About" />} /><Popover.Content>  <p className="text-sm text-heyo-subtle">    Requests are counted per region, including cache hits.  </p></Popover.Content></Popover>

Placement

side and align set the preferred position; it flips and shifts on its own when the space is not there.

<Popover.Content side="right" align="start" sideOffset={8}>…</Popover.Content>

Properties

Popover

Base UI's root: open, defaultOpen, onOpenChange, plus the usual interaction props.

Popover.Content

The rest