Popover

View source Report an issue Edit this page

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

Prop	Type	Default	Required
`open`	`boolean`	-	-
`defaultOpen`	`boolean`	-	-
`onOpenChange`	`(open: boolean) => void`	-	-
`modal`	`boolean`	-	-
`css`	`CSSProperties`	-	-

Popover.Content

Prop	Type	Default	Required
`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`	-
`css`	`CSSProperties`	-	-
`closePopoverText`	`string`	`Close popover`	-
`showCloseButton`	`boolean`		-