Popover
Anchored floating content for rich contextual UI.
Quick Preview
Composition
Use this public composition when building Popover:
Popover
├── PopoverTrigger
└── PopoverContent
├── PopoverHeader
├── PopoverBody
└── PopoverFooterUsage
<Popover><PopoverTrigger render={<Button />}>Open</PopoverTrigger><PopoverContent><PopoverTitle>Details</PopoverTitle></PopoverContent></Popover>Examples
Default Popover
Use this as the starting point for Popover. Keep product data, routing, fetching, and authorization logic in the consuming app.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
size | `"sm" | "md" | "lg"` |
showArrow | boolean | true | Renders arrow pointer. |
| position props | Base UI positioner props | - | side, align, and offsets. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Popover composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.