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

The Popover component provides a way to display rich content in a portal when triggered by a button. It supports accessibility features, positioning options, and customizable styling.

Installation

Install the component from your command line.

npm install @raystack/apsara

Basic Example

import { Popover, Button, Text } from '@raystack/apsara/v1'

<Popover>
  <Popover.Trigger asChild>
    <Button>Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Text size="2">This is the popover content</Text>
  </Popover.Content>
</Popover>

The Popover component consists of several parts, each with their own props:

Popover.Root Props

defaultOpen: Boolean to control the default open state
open: Controlled open state
onOpenChange: Callback when open state changes
modal: Boolean to enable modal behavior

Popover.Content Props

ariaLabel: Accessible label for the popover content (default: "Popover content")
side: Preferred side of the trigger to render ("top" | "right" | "bottom" | "left")
sideOffset: Distance in pixels from the trigger
align: Alignment relative to trigger ("start" | "center" | "end")
alignOffset: Offset in pixels from alignment edge
avoidCollisions: Boolean to prevent collision with viewport edges
collisionPadding: Padding between content and viewport edges

Popover.Trigger Props

asChild: Boolean to merge props onto child element

Positioning

Control the position and alignment of your popover relative to its trigger.

Alignment

Customize how the popover aligns with its trigger.

Accessibility

The Callout component includes appropriate ARIA attributes for accessibility:

Uses semantic HTML elements for proper structure
Dismiss button includes aria-label for screen readers