Popover provides a styled actionable popup

Popover exports 3 components that combine to create our popover. The Popover.Trigger renders a <button> by default, but this can be overridden with the asChild prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).

Also, note that the component must accept a ref.

Read more about the underlying UI component on the Radix UI documentation site.

<Popover>
<Popover.Trigger asChild>
<Button>Click me</Button>
</Popover.Trigger>
<Popover.Content>
<Heading size="xs" css={{ mb: '$3' }}>
Popover
</Heading>
<Text size="sm">
The `Popover` can display any type of element as a trigger and has the
content hidden by default
</Text>
</Popover.Content>
</Popover>

API Reference

Popover

PropTypeDefaultRequired
open
boolean

-

-

defaultOpen
boolean

-

-

onOpenChange
(open: boolean) => void

-

-

modal
boolean

-

-

cssCSSProperties

-

-

Popover.Content

PropTypeDefaultRequired
asChild
boolean

-

-

side
"bottom" | "left" | "right" | "top"
top

-

sideOffset
number
8

-

align
"center" | "end" | "start"

-

-

alignOffset
number

-

-

arrowPadding
number

-

-

collisionBoundary
null | Element | Boundary[]

-

-

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

-

-

sticky
"always" | "partial"

-

-

hideWhenDetached
boolean

-

-

avoidCollisions
boolean

-

-

onEscapeKeyDown
(event: KeyboardEvent) => void

-

-

onPointerDownOutside
(event: PointerDownOutsideEvent) => void

-

-

onFocusOutside
(event: FocusOutsideEvent) => void

-

-

onInteractOutside
(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

-

-

onOpenAutoFocus
(event: Event) => void

-

-

onCloseAutoFocus
(event: Event) => void

-

-

forceMount
true

-

-

size
"sm" | "md" | "lg"
md

-

cssCSSProperties

-

-

closePopoverText
string
Close popover

-

showCloseButton
boolean

-