Popover

A small surface anchored to its trigger for contextual controls or details that do not need a full dialog.

When to use

• Quick, interactive tasks tied to one control: share settings, a filter, a date or color choice.
• Showing a few extra details on click while keeping the page usable.
• Not for read-only previews on hover: use HoverCard. Not for one-line hints: use Tooltip. For blocking decisions use Dialog.

Usage

import { Popover } from "@/components/iris/popover/popover";

h(
  Popover,
  null,
  h(PopoverTrigger, { asChild: true }, h(Button, { variant: "secondary" }, "Share page")),
  h(
    PopoverContent,
    { side: "bottom", align: "start" },
    h(Input, { label: "Invite by email", placeholder: "name@studio.example" }),
    h(PopoverClose, { asChild: true }, h(Button, { variant: "ghost", size: "sm" }, "Cancel")),
  ),
);

Props

Popover is the Radix Popover Root (open, defaultOpen, onOpenChange, modal).

PopoverContent (Radix Popover Content, portalled)

Prop	Type	Default	Description
side	"top" | "right" | "bottom" | "left"	"bottom"	Preferred side; flips on collision.
align	"start" | "center" | "end"	"start"	Alignment against the trigger.
sideOffset	number	6	Gap from the trigger in px.
collisionPadding	number	10	Distance kept from the viewport edge.
children	ReactNode	—	Your content; the surface has no built-in title or close button.

PopoverTrigger is the Radix trigger with press-scale disabled so the anchor does not shift the panel. PopoverClose closes from inside.

Notes

• Radix handles focus: it moves into the panel on open, Escape and outside clicks close it, and focus returns to the trigger. Give the content a visible heading when it holds a form.
• Enter and exit are CSS transitions keyed off data-state (so an interrupted close reverses from where it is), with a reduced-motion fallback.
• Reads --surface, --line, --ink, --shadow-floating, --radius-panel.