Skip to content

Popover

A small panel anchored to its trigger, for a few controls or details. Esc or a click outside closes it.

Sourcecomponents/popover.tsx

Share

Explanation (opens on hover, and on tap)

Seats

Usage

Popover usage
import { Button } from "@/components/button";import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/popover";
export function PopoverUsage({ link }: { link: string }) {  return (    <Popover>      <PopoverTrigger render={<Button variant="outline" />}>Share</PopoverTrigger>      <PopoverContent>        <PopoverHeader>          <PopoverTitle>Share brief</PopoverTitle>          <PopoverDescription>Anyone with the link can view it.</PopoverDescription>        </PopoverHeader>        <Button onClick={() => navigator.clipboard.writeText(link)}>Copy link</Button>      </PopoverContent>    </Popover>  );}

When to use

Use when

A few controls or details beside their trigger: share a link, a quick setting, an explanation behind an info icon (openOnHover). Give it a PopoverTitle

Don’t use when

A task that needs full attention (use Dialog); a label for an icon button (use Tooltip)