Popover
A popover is a floating layer that displays content relative to a target element.
Overview
- Toggles
- open
All options
Default
Popover has no visual variants. It opens below the anchor element, aligned to its start edge, with a 4px gap.
Accessibility
Keyboard and dismissal
Escape and clicks outside the popover call onClose. Clicks on the anchor are left to the anchor's own handler, so it can toggle the popover.
Screen readers
The popover renders in a portal with role="dialog" and the id you pass.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| id | string | No | — |
| anchorEl | HTMLElement | null | No | — |
| open | boolean | Yes | — |
| onClose | () => void | Yes | — |
| children | React.ReactNode | Yes | — |