FloatingPanel, Asgard Docs

Feedback & overlays

A panel anchored to a trigger.

A floating panel that anchors to a reference element for building dropdowns, popovers, and contextual overlays.

Key features:

Multiple placement positions (e.g., top, bottom-start, right)
Auto-repositions to stay within viewport bounds
matchAnchorWidth for dropdown-style panels
Built-in click-outside and escape key dismissal

Loading preview…

When to use it

Popovers and rich dropdowns
Inline editors and pickers
Contextual help bubbles
Auto-positioned menus with an arrow

Properties

Prop	Type	Default	Description
`anchorRef`	`React.RefObject<HTMLElement>`	—	Reference to the DOM element that the floating panel anchors to for positioning.
`isOpen`	`boolean`	—	Controls whether the floating panel is currently visible.
`onClose`	`() => void`	—	Callback invoked when the panel requests to be closed.
`position`	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end'`	—	Preferred placement of the panel relative to the anchor element.
`offset`	`number`	—	Pixel distance between the anchor element and the floating panel edge.
`width`	`number \| 'auto' \| 'fit-content'`	—	Width of the panel. Use a number for fixed pixels, or auto/fit-content for dynamic sizing.
`matchAnchorWidth`	`boolean`	—	When true, the panel width matches the anchor element width, ideal for dropdown-style panels.
`closeOnClickOutside`	`boolean`	`true`	Closes the panel when the user clicks outside of it.

Notes

The panel automatically repositions to the opposite side if the preferred position would cause it to overflow the viewport.
Set matchAnchorWidth to true for dropdown-style panels that should be the same width as their trigger element.

Presets