/ux
Components/Overlays/Popover

Popover

Overlays

Anchored floating panel for forms, pickers, and rich content.

Non-modal floating panel anchored to a trigger. Compose from PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter. Use for filter panels, context menus, and detail previews.

Usage

import { Popover, PopoverTrigger, PopoverContent, PopoverBody } from "nosible-ux"
import { Button } from "nosible-ux"

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button intent="outline">Region filter</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverBody>Filter options go here</PopoverBody>
      </PopoverContent>
    </Popover>
  )
}

Examples

With header and footer

With arrow

Accessibility

Radix Popover: role="dialog", focus management into the panel, and Escape to dismiss are handled. trapFocus is configurable.

Props

Name TypeDefaultDescription
align
"center" | "start" | "end" | undefined—Alignment relative to the trigger. Default: `"start"`.
alignOffset
number | undefined—
arrowPadding
number | undefined—
asChild
boolean | undefined—
avoidCollisions
boolean | undefined—
closeOnClickOutside
boolean | undefined—Close when pointer-down occurs outside the panel. Default: `true`.
closeOnEscape
boolean | undefined—Close on Escape key press. Default: `true`.
collisionBoundary
Boundary | Boundary[] | undefined—
collisionPadding
number | Partial<Record<"top" | "bottom" | "left" | "right", number>> | undefined—
forceMount
true | undefined—Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
hideWhenDetached
boolean | undefined—
onCloseAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on close. Can be prevented.
onEscapeKeyDown
((event: KeyboardEvent) => void) | undefined—Event handler called when the escape key is down. Can be prevented.
onFocusOutside
((event: FocusOutsideEvent) => void) | undefined—Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
onInteractOutside
((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined—Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
onOpenAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on open. Can be prevented.
onPointerDownOutside
((event: PointerDownOutsideEvent) => void) | undefined—Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
side
"top" | "bottom" | "left" | "right" | undefined—
sideOffset
number | undefined—Distance between the trigger and the panel in pixels. Default: `8`.
sticky
"partial" | "always" | undefined—
trapFocus
boolean | undefined—Keep focus within the popover panel. Prevents focus from leaving the panel while it is open. Default: `false`.
updatePositionStrategy
"always" | "optimized" | undefined—
withArrow
boolean | undefined—Render the pointing arrow inside the panel. Default: `false`.
← All ComponentsGetting Started →