Skip to content

Popover

stable

Floating content panel anchored to a trigger element

OverlaysInteractive/Storybook ↗
import { Popover } from "@nodus/design-system"
Loading demo…

Props

triggerrequired
Type ReactNodeDefault

Element that opens the popover

contentrequired
Type ReactNodeDefault

Popover content

side
Type "top" | "bottom" | "left" | "right"Default "bottom"

Popover placement

align
Type "start" | "center" | "end"Default "center"

Alignment on the side axis

Metadatasemantictypebordersurface
MobileTouch Target

Floating popovers that extend beyond viewport should reposition automatically. Trigger must be ≥44px. On mobile, prefer a bottom sheet or dialog for content-heavy popovers.

Design Rationale

This component was designed to express:

Explore Related

Was this helpful?