Popover

React popover built on Radix for rich content anchored to a trigger: inline edit forms, filters, and previews, with an optional arrow and modal focus trapping.

Open in Storybook ↗

Popover anchors rich content to a trigger. It renders role="dialog", so give it an aria-label; pass modal to trap focus.

When to use

Use Popover when a control needs a small panel of interactive content next to it. Examples: an inline edit form, a date preset list, or a quick filter. Use Tooltip for read-only hints and Modal for tasks that must block the page.

Pass modal when the panel holds a form the user must finish.

Examples

Default

With arrow

Inline edit form (Arabic)

Props

Props declared by Popover. Native attributes of the underlying element pass through.

<Popover>

Prop	Type	Default	Description
`children`	`ReactNode`
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`modal`	`boolean`

<PopoverTrigger>

Prop	Type	Default	Description
`asChild`	`boolean`

<PopoverAnchor>

Prop	Type	Default	Description
`virtualRef`	`React.RefObject<Measurable>`
`asChild`	`boolean`

<PopoverContent>

Prop	Type	Description
`size`	`"sm" \| "md"`
`arrow`	`boolean`	Show a small arrow pointing at the trigger. Defaults to false.
`deferPointerDownOutside`	`boolean`	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 of later events and cancel dismissal.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`	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 prevented.
`forceMount`	`true`	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onOpenAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on open. Can be prevented.
`onCloseAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on close. Can be prevented.
`side`	`"top" \| "right" \| "bottom" \| "left"`
`sideOffset`	`number`
`align`	`"center" \| "start" \| "end"`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`

<PopoverClose>

Prop	Type	Default	Description
`closeLabel`	`string`		Localized label for the default corner-X button. Only used when no `children` (and no `asChild`) are provided. Defaults to `"Close"`.
`asChild`	`boolean`

Accessibility

The panel renders role="dialog", so give it an aria-label or aria-labelledby. Escape closes it and focus returns to the trigger. With modal, focus is trapped inside the panel.

Anchor the popover to a focusable trigger so keyboard users can open it.