Anatomy

Import and assemble the component:

1import { Popover } from "@raystack/apsara";
2
3<Popover>
4  <Popover.Trigger />
5  <Popover.Content />
6</Popover>

API Reference

Root

Groups all parts of the popover.

Content

Renders the popover content panel.

Trigger

Renders the element that opens the popover.

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

• Follows the WAI-ARIA Dialog pattern
• Trigger uses aria-haspopup and aria-expanded attributes
• Focus is managed when opening and closing the popover
• Supports dismissal with Escape key