Overlay
Popover
A bubble panel that opens on click. It holds a title and any content, and closes on Escape or an outside click without blocking the page.
ReactVueWeb Components
View in Storybook Playground
Examples
<Popover title="Info" content={<p>Details…</p>}>
<button>More</button>
</Popover>Props
| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Optional header shown above the body. |
content required | ReactNode | — | Popover body content. |
children required | ReactElement<{ 'aria-expanded'?: boolean; 'aria-haspopup'?: 'dialog'; onClick?: (e: React.MouseEvent) => void; }> | — | The trigger element. It receives `aria-expanded`, `aria-haspopup`, and an onClick toggle; it must be a focusable element. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state (uncontrolled). @default false |
onOpenChange | (open: boolean) => void | — | Called when open state changes. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.