Displays rich content in a portal, triggered by a button.

PopoverProps

defaultOpen

boolean

modal

onOpenChange

(open: boolean) => void

open

TypeLiteral

asChild

PopperAnchorProps

virtualRef

RefObject<Measurable>

PopperContentProps

align

enum

alignOffset

number

arrowPadding

avoidCollisions

collisionBoundary

Element | Element[]

collisionPadding

number | Partial<Record<"top" | "right" | "bottom" | "left", number>>

enforceBoundaries

PopoverContentProps

Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries.

forceMount

true

When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.

hasCloseButton

hideWhenDetached

matchTriggerWidth

PopoverContentImplProps

Event handler called when auto-focusing on close.
Can be prevented.

onCloseAutoFocus

(event: Event) => void

DismissableLayerProps

Event handler called when the escape key is down.
Can be prevented.

onEscapeKeyDown

(event: KeyboardEvent) => void

Event handler called when the focus moves outside of the `DismissableLayer`.
Can be prevented.

onFocusOutside

(event: 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.

onInteractOutside

(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when auto-focusing on open.
Can be prevented.

onOpenAutoFocus

Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
Can be prevented.

Popover

Install#

Import#