Popover
Floating content panel triggered by a button. Compound component with Trigger and Content.
Example
Popover content can contain any elements.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | No | Controlled open state |
defaultOpen | boolean | false | No | Initial state (uncontrolled) |
onOpenChange | (open: boolean) => void | — | No | Called when open state changes |
anchor | Anchor | 'bottom' | No | Position and alignment relative to trigger (e.g. bottom-center) |
asChild | boolean | false | No | On PopoverTrigger — merges trigger props onto the child element instead of rendering a wrapping <button> |
maxWidth | string | — | No | On PopoverContent — overrides the default max-width (CSS value, e.g. "var(--layout-80)") |
Accessibility
- Trigger gets aria-expanded and aria-haspopup
- Content has role and aria-labelledby
- Escape closes the popover
- Click outside dismisses
Related Tokens
--popover-surface--popover-on-surface--popover-border