Skip to content

index.mdx

Latest commit

 

History

History
64 lines (39 loc) · 1.35 KB

index.mdx

File metadata and controls

64 lines (39 loc) · 1.35 KB
title Popover
description Displays rich content in a portal, triggered by a button.
source packages/raystack/components/popover

import { playground, alignDemo, positionDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

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

<Popover>
  <Popover.Trigger />
  <Popover.Content />
</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.

Alignment

Customize how the popover aligns with its trigger.

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
  • Respects motion preferences: popover entry motion is enabled only when prefers-reduced-motion: no-preference