Popover

Wraps Radix Popover. Carbon-spec sizing, animation, focus management.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { Popover, PopoverAnchor, PopoverClose, PopoverContent } from "@avala/design";

<Popover>
  <PopoverAnchor />
  <PopoverClose />
  <PopoverContent />
</Popover>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-popover--defaultOpen in Storybook →

When to use

Click-triggered, persistent surfaces holding rich content (a small form, a colour picker, a date range).
Anchored to an interactive trigger; closes on outside-click or Escape.

When not to use

Hover-triggered plain-text labels → use `Tooltip`.
Action menus → use `DropdownMenu`.
Top-level navigation → use `NavigationMenu`.
Modal-blocking surfaces → use `Dialog`.