Popover
@stellaria/nebula-webPopoverPropsPreview
Props
18| Prop | Type | Default |
|---|---|---|
aria-label Names the popover for screen readers. Needed when there is no heading inside doing it. | string | — |
children required | ReactNode | — |
className | string | — |
containerPadding Minimum gap from the viewport edge before repositioning. | number | — |
crossOffset Offset along the perpendicular axis, in px, to shift it off-centre from the trigger. | number | — |
defaultOpened | boolean | false |
isKeyboardDismissDisabled Turning off close-on-Escape leaves keyboard users with no way out: only with another obvious route. | boolean | — |
isNonModal Lets interaction through to the rest of the page: no scrim, no focus trap, and no close on outside press. This is what a popover accompanying a form needs, not a modal one. | boolean | — |
offset Distance from the trigger, in px, along the `placement` axis. | number | 8 |
onOpenChange | ((opened: boolean) => void) | — |
opened Passing it makes the popover controlled: the component stops opening and closing on its own and only emits `onOpenChange`. | boolean | — |
padding | "sm" | "md" | "lg" | "none" | "md" |
placement The REQUESTED placement. If it does not fit, React Aria changes it, unless you turn `shouldFlip` off. | PopoverPlacement | "bottom" |
radius | "sm" | "md" | "lg" | "md" |
shouldFlip Turning it off keeps the popover at its `placement` even off-screen: only when the position is guaranteed. | boolean | true |
trigger requiredThe element that opens and anchors the popover. It receives the `ref` and the aria attributes, so it has to forward them. | OverlayTriggerElement | — |
width Fixed width of the popover. Without it, it fits its content. | string | number | — |
withArrow | boolean | false |
Also accepts
On top of its own props, this component forwards these groups.