Popover
Anchored floating panel built on CSS Anchor Positioning + Popover API
Category: overlay · WCAG 2.2-AA · overlay, floating, anchor, popover
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | A PopoverTrigger and PopoverContent pair. |
open | boolean | — | Whether the component is open (controlled). |
onOpenChange | (open: boolean) => void | — | Called with the next open state when it changes. |
placement | 'top' | 'bottom' | 'left' | 'right' | bottom | Placement relative to the trigger. |
offset | number | 4 | Distance (px) between the trigger and the panel. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-md--cascivo-shadow-md--cascivo-motion-enter--cascivo-motion-exit
When to use
- Showing rich, interactive content anchored to a trigger that the user must explicitly open by clicking
- Lightweight transient panels (forms, pickers, detail cards) that do not need to block the rest of the page
When not to use
- A short, non-interactive text hint on hover/focus — use Tooltip
- A task that must capture focus and block interaction with the page — use Modal
- Preview content revealed on hover without a click — use HoverCard
How to build an accessible Popover in React →
Examples
Basic
<Popover>
<PopoverTrigger>Open settings</PopoverTrigger>
<PopoverContent>
<form>…</form>
</PopoverContent>
</Popover>Controlled with placement
<Popover open={isOpen} onOpenChange={setIsOpen} placement="top">
<PopoverTrigger>Filters</PopoverTrigger>
<PopoverContent><FilterForm /></PopoverContent>
</Popover>