Popovers

Popover floats a small panel next to the element that opened it. Unlike a dialog it is non-modal: it does not dim the page or trap focus, so it suits lightweight, optional content such as a settings cluster, a quick form, or extra detail. Reach for it when the content is anchored to a specific control and the user can dismiss it just by clicking away.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: popover.tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  Button,
  Input,
  Label,
} from "@beacon/design-system";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" align="center" sideOffset={4}>
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div className="grid grid-cols-3 items-center gap-4">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
      </div>
    </div>
  </PopoverContent>
</Popover>

Parts

Part	Role
Popover	Root state container. Accepts open and onOpenChange for controlled use.
PopoverTrigger	The anchor element that toggles the popover. Use asChild to wrap your own button.
PopoverContent	The floating panel. Accepts align (defaults to "center") and sideOffset (defaults to 4); rendered through a portal.

When to use

• Optional, anchored content such as a small settings group or quick edit form.
• Extra detail or controls that should not interrupt the page or trap focus.

Do not use a Popover for a single line of explanatory text on hover: use a Tooltip instead. For a task that must block the page, use a Dialog.