Popover

<Popover>
  <Popover.Trigger asChild>
    <Button>Top Popover</Button>
  </Popover.Trigger>
  <Popover.Content>This is the popover content.</Popover.Content>
</Popover>

Usage

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.

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

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