Popover
OverlaysNon-modal anchored panel. Positions against its trigger with viewport flipping and clamping; closes on Escape, outside pointerdown or blur-out.
import { Popover } from "@componentforge/react";
Examples
Anchored panel with placement
Accessibility
- role="dialog" without aria-modal — background remains reachable by design.
- Trigger carries aria-expanded and aria-haspopup="dialog".
- Focus moves into the panel on open and returns to the trigger on close.
- Panel closes when focus moves completely outside trigger + panel (onBlur relatedTarget check).
Keyboard interactions
| Key | Action |
|---|---|
| Escape | Close and refocus the trigger. |
| Tab | Leave the popover (closes when focus leaves). |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| placement | "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom" | "top" | "bottom-start" | Preferred side/alignment; flips when out of viewport. |
| label | string | "" | Accessible name for the panel. |
| open / defaultOpen / onOpenChange | — | false | Controlled/uncontrolled open state. |