Popover
Click-triggered popover built on Radix UI Popover primitives. Displays rich content in a floating panel anchored to a trigger element.
Basic Popover
Preview
Popover Positions
Preview
Rich Content
Preview
PopoverContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side of the trigger to render the popover. |
| sideOffset | number | 4 | Distance in pixels from the trigger. |
| align | "start" | "center" | "end" | "center" | Alignment of the popover relative to the trigger. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Popover which follows the WAI-ARIA Dialog pattern for non-modal popovers
- Focus is trapped within the popover when open, and returned to the trigger on close
- Pressing
Escapecloses the popover - Clicking outside the popover dismisses it
- Use
asChildonPopoverTriggerto ensure the trigger is a focusable interactive element