PopoverAnchor
A positioned surface for a little content, with focus moved into it and returned.
@luc/uiExamples
Default
Anchored to its trigger, focus-trapped while open and closed by Escape.
<PopoverRoot>
<PopoverTrigger asChild>
<Button variant="secondary">Chart filters</Button>
</PopoverTrigger>
<PopoverContent width="sm" align="start">
<Text variant="label" as="p">Series</Text>
<Text variant="caption" tone="muted" as="p">Two of three series are visible.</Text>
</PopoverContent>
</PopoverRoot>Usage
import { PopoverRoot, PopoverTrigger, PopoverContent } from "@luc/ui";<PopoverRoot>
<PopoverTrigger asChild>
<Button variant="secondary">Columns</Button>
</PopoverTrigger>
<PopoverContent side="bottom" align="start">
{/* real controls: checkboxes, a form, a filter */}
</PopoverContent>
</PopoverRoot>Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
PopoverAnchor | 2 documented props | import("@types/react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("@types/react").RefAttributes<HTMLDivElement>> |
PopoverClose | 1 documented props | import("@types/react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("@types/react").RefAttributes<HTMLButtonElement>> |
PopoverContent | 21 documented props | ({ className, width, sideOffset, align, ...props }: PopoverContentProps) => import("@types/react").JSX.Element |
PopoverRoot | 5 documented props | import("@types/react").FC<RadixPopover.PopoverProps> |
PopoverTrigger | 1 documented props | import("@types/react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("@types/react").RefAttributes<HTMLButtonElement>> |
PopoverAnchor props
Type: PopoverAnchorProps & RefAttributes<HTMLDivElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
virtualRef?inherited | RefObject<Measurable | null> | undefined | — |
PopoverClose props
Type: PopoverCloseProps & RefAttributes<HTMLButtonElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — |
PopoverContent props
Type: PopoverContentProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
align?inherited | "center" | "start" | "end" | undefined | — | |
alignOffset?inherited | number | undefined | — | |
arrowPadding?inherited | number | undefined | — | |
asChild?inherited | boolean | undefined | — | |
avoidCollisions?inherited | boolean | undefined | — | |
collisionBoundary?inherited | Boundary | Boundary[] | undefined | — | |
collisionPadding?inherited | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | — | |
deferPointerDownOutside?inherited | boolean | undefined | — | When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation o… |
forceMount?inherited | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
hideWhenDetached?inherited | boolean | undefined | — | |
onCloseAutoFocus?inherited | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on close. Can be prevented. |
onEscapeKeyDown?inherited | ((event: KeyboardEvent) => void) | undefined | — | Event handler called when the escape key is down. Can be prevented. |
onFocusOutside?inherited | ((event: FocusOutsideEvent) => void) | undefined | — | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
onInteractOutside?inherited | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined | — | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prev… |
onOpenAutoFocus?inherited | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on open. Can be prevented. |
onPointerDownOutside?inherited | ((event: PointerDownOutsideEvent) => void) | undefined | — | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
side?inherited | "top" | "right" | "bottom" | "left" | undefined | — | |
sideOffset?inherited | number | undefined | — | |
sticky?inherited | "partial" | "always" | undefined | — | |
updatePositionStrategy?inherited | "always" | "optimized" | undefined | — | |
width? | "auto" | "sm" | "md" | "lg" | undefined | — | Width preset. `auto` lets the content define its own size. |
PopoverRoot props
Type: PopoverProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children?inherited | ReactNode | — | |
defaultOpen?inherited | boolean | undefined | — | |
modal?inherited | boolean | undefined | — | |
onOpenChange?inherited | ((open: boolean) => void) | undefined | — | |
open?inherited | boolean | undefined | — |
PopoverTrigger props
Type: PopoverTriggerProps & RefAttributes<HTMLButtonElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — |
Guidelines
Do
- Use it for interactive content anchored to a control: a filter panel, a small form, a set of toggles.
- Set `side` and `align` on the content, and keep the panel narrow enough that it does not become a second page.
Don't
- Use a popover for a sentence of help; `Tooltip` is the non-interactive label and does not compete for focus.
- Replace a dialog with a popover when the task must block the page; the popover closes on outside interaction by design.
Accessibility
The trigger is a button with `aria-expanded`; the content is a labelled dialog-like surface, so focus moves into it and Escape closes it. Outside interaction dismisses it and focus returns to the trigger.
What happens on the server, and when hydration changes it.
Family
Overlays
Content that leaves the flow, or reveals itself in place — and the focus contract that has to come with it.
10 documented entries in this family. Open the family index
Related