Popover

defaultOpen

boolean

The open state of the popover when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the popover. Must be used in conjunction with onOpenChange.

onOpenChange

function (open: boolean) => void

Event handler called when the open state of the popover changes.

modal

boolean

false

The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.

asChild

boolean

false

Change the default rendered element for the one passed as a child, merging their props and behavior.

onOpenAutoFocus

function (event: Event) => void

Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.

onCloseAutoFocus

function (event: Event) => void

Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault

onPointerDownOutside

function (event: PointerDownOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

onFocusOutside

function (event: FocusOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

side

enum

bottom ("top" | "right" | "bottom" | "left")

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

sideOffset

number

0

The distance in pixels from the trigger.

align

enum

center ("start" | "center" | "end")

The distance in pixels from the trigger.

alignOffset

number

0

The vertical distance in pixels from the anchor.

avoidCollisions

boolean

true

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary (Element | null | Array<Element | null>)

[]

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding number | Partial<Record<Side, number>>

0

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

sticky

enum "partial" | "always"

"partial"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

hideWhenDetached

boolean

false

Whether to hide the content when the trigger becomes fully occluded.