Usage

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

Popover Props

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

Popover.Root Props

Popover.Content Props

Popover.Trigger Props

Examples

Positioning

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

1<Popover>
2  <Popover.Trigger asChild>
3    <Button>Top Popover</Button>
4  </Popover.Trigger>
5  <Popover.Content side="top">
6    <Text size="2">Content appears above the trigger</Text>
7  </Popover.Content>
8</Popover>

Alignment

Customize how the popover aligns with its trigger.

1<Popover>
2  <Popover.Trigger asChild>
3    <Button>Center Aligned</Button>
4  </Popover.Trigger>
5  <Popover.Content align="center">
6    <Text size="2">Centered with the trigger</Text>
7  </Popover.Content>
8</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