Popover
React componentReveal contextual controls beside their trigger.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
triggerRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | A single focusable React element; use a staqui Button or Link. |
labelRequired | string | A meaningful visible or accessible label. |
childrenRequired | ReactNode | Content rendered inside the component. |
open | boolean | undefined | Controlled overlay visibility. |
defaultOpen | boolean | undefined | See the typed definition and working example for this option. |
onOpenChange | ((open: boolean) => void) | undefined | Called when the user opens or dismisses the overlay. |
align | "start" | "center" | "end" | undefinedDefault: "start" | See the typed definition and working example for this option. |
side | "left" | "right" | "top" | "bottom" | undefinedDefault: "bottom" | See the typed definition and working example for this option. |
Accessibility & interaction
Radix handles anchoring, collision avoidance, Escape and focus return. It is nonmodal; use Modal for tasks that must block background interaction.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Radix handles anchoring, collision avoidance, Escape and focus return. It is nonmodal; use Modal for tasks that must block background interaction.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.