Popover

overlays

Floating content panel with click trigger, outside-click dismiss, Escape key close, optional title with close button, and role=dialog. Supports both controlled and uncontrolled open state.

Import

typescript
import { Popover } from "packages/ui/src";

Props

PopoverProps

PropTypeRequired
triggerReactElementYes
titlestringNo
childrenReactNodeYes
openbooleanNo
onOpenChange(open) => voidNo

Examples

Popover Component

Floating content panel with click trigger, outside-click dismiss, Escape close, title, and role=dialog. 46th component.

With Title

Without Title

Metadata

Component Metadata
Familyoverlays
FrameworksNext.js, Astro/EmDash
DescriptionFloating content panel with click trigger, outside-click dismiss, Escape key close, optional title with close button, and role=dialog. Supports both controlled and uncontrolled open state.
PropsPopoverProps (trigger: ReactElement, title?: string, children: ReactNode, open?: boolean, onOpenChange?: (open) => void)
Statesclosed, open, with-title, without-title
A11y
  • Trigger has aria-haspopup=dialog and aria-expanded
  • Panel has role=dialog with aria-label
  • Close button with aria-label
  • Escape key closes panel
Responsive
  • Absolute positioned below trigger
  • Max-width constrained
Motion
  • No animation by default
Token Dependencies
  • components.popover.background
  • components.popover.borderColor
  • components.popover.borderRadius
  • components.popover.padding
  • components.popover.shadow
  • components.popover.maxWidth
  • components.popover.zIndex
  • components.popover.titleColor
  • components.popover.titleFontSize
  • components.popover.bodyColor
  • components.popover.bodyFontSize
  • components.popover.closeColor
  • components.popover.closeHoverColor
Content Slotstitle (string), children (ReactNode), trigger (ReactElement)
CMS Bindings
  • Panel content from CMS
  • Title from CMS field
Test Cases
  • Hidden by default
  • Opens on trigger click
  • Shows title when provided
  • Renders children content
  • Has role=dialog
  • Trigger has aria-haspopup
  • Close button closes panel
  • Passes className through