Popover

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

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

Prop

Type

Content

Prop

Type

Trigger

Prop

Type

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