BNA

BNA UI
...

Popover

PreviousNext

A contextual overlay that displays rich content triggered by user interaction.

Installation

pnpm dlx bna-ui add popover

Usage

import {
  Popover,
  PopoverBody,
  PopoverClose,
  PopoverContent,
  PopoverFooter,
  PopoverHeader,
  PopoverTrigger,
} from '@/components/ui/popover';
<Popover>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <Text>Popover Title</Text>
    </PopoverHeader>
    <PopoverBody>
      <Text>This is the popover content.</Text>
    </PopoverBody>
    <PopoverFooter>
      <PopoverClose>
        <Button variant='outline'>Close</Button>
      </PopoverClose>
    </PopoverFooter>
  </PopoverContent>
</Popover>

Examples

Default

Positioning

Alignment

Controlled

Custom Content

Form Content

Menu Style

API Reference

Popover

The root component that manages the popover state and provides context.

PropTypeDefaultDescription
childrenReactNode-The popover trigger and content components.
openbooleanfalseControls the open state of the popover.
onOpenChange(open: boolean) => void-Callback fired when the open state changes.

PopoverTrigger

The element that triggers the popover when pressed.

PropTypeDefaultDescription
childrenReactNode-The trigger content.
asChildbooleanfalseWhen true, merges props with the child element.
styleViewStyle-Additional styles to apply to the trigger container.

PopoverContent

The container for the popover content with positioning logic.

PropTypeDefaultDescription
childrenReactNode-The popover content.
align'start' | 'center' | 'end'centerHow to align the popover relative to the trigger.
side'top' | 'right' | 'bottom' | 'left'bottomThe preferred side of the trigger to position against.
sideOffsetnumber8The distance between the trigger and the popover.
alignOffsetnumber0An offset in pixels from the alignment position.
styleViewStyle-Additional styles to apply to the content container.
maxWidthnumber300Maximum width of the popover in pixels.
maxHeightnumber400Maximum height of the popover in pixels.

PopoverHeader

A header section for the popover content.

PropTypeDescription
childrenReactNodeThe header content.
styleViewStyleAdditional styles to apply to the header container.

PopoverBody

The main content area of the popover.

PropTypeDescription
childrenReactNodeThe body content.
styleViewStyleAdditional styles to apply to the body container.

PopoverFooter

A footer section for the popover content.

PropTypeDescription
childrenReactNodeThe footer content.
styleViewStyleAdditional styles to apply to the footer container.

PopoverClose

A utility component that closes the popover when pressed.

PropTypeDefaultDescription
childrenReactNode-The close trigger content.
asChildbooleanfalseWhen true, merges props with the child element.
styleViewStyle-Additional styles to apply to the close container.

Positioning

The popover automatically positions itself relative to the trigger element and adjusts based on available screen space:

  • Side: Controls which side of the trigger the popover appears on (top, right, bottom, left)
  • Alignment: Controls how the popover aligns relative to the trigger (start, center, end)
  • Auto-flipping: When there's insufficient space, the popover automatically flips to the opposite side
  • Boundary detection: Ensures the popover stays within screen boundaries with appropriate padding

Accessibility

The Popover component is built with accessibility in mind:

  • Content is marked accessibilityViewIsModal with accessibilityRole="menu", scoping VoiceOver/TalkBack to it while open
  • Trigger and close controls expose accessibilityRole="button" and accessibilityState={{ expanded }}
  • Tap-outside-to-dismiss via the backdrop for an easy close gesture
  • Touch-friendly interaction areas via the underlying Button component's sizing
PickerProgress