Popover

Usage

import { Popover } from "@raystack/apsara";

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

Popover.Root Props

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

Popover.Content Props

Prop	Type	Default
`ariaLabel`	`string`	`"Popover content"`
`side`	`"top" \| "right" \| "bottom" \| "left"`	-
`sideOffset`	`number`	-
`align`	`"start" \| "center" \| "end"`	-
`alignOffset`	`number`	-
`avoidCollisions`	`boolean`	-
`collisionPadding`	`number`	-

Popover.Trigger Props

Prop	Type	Default
`asChild`	`boolean`	-

Examples

Positioning

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

<Popover>
  <Popover.Trigger asChild>
    <Button>Top Popover</Button>
  </Popover.Trigger>
  <Popover.Content side="top">
    <Text size="2">Content appears above the trigger</Text>
  </Popover.Content>
</Popover>

Alignment

Customize how the popover aligns with its trigger.

<Popover>
  <Popover.Trigger asChild>
    <Button>Center Aligned</Button>
  </Popover.Trigger>
  <Popover.Content align="center">
    <Text size="2">Centered with the trigger</Text>
  </Popover.Content>
</Popover>

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