Popover

A click-triggered, non-modal floating panel anchored to its trigger. Focus moves in on open but is never trapped; Escape and outside clicks close it.

Installation

npx dafink-ui add popover

Demo

Props

NameTypeDefaultDescription
triggerReactNode-Content of the built-in trigger button.
childrenReactNode-Panel content. May contain interactive elements.
side'top' | 'right' | 'bottom' | 'left''bottom'Which side of the trigger the panel appears on.
align'start' | 'center' | 'end''center'Alignment along the chosen side.
labelstringundefinedAccessible name for the panel (aria-label).
onOpenChange(open: boolean) => voidundefinedCalled whenever the popover opens or closes.
disabledbooleanfalseDisables the trigger.
classNamestring''Additional classes on the panel.
triggerClassNamestring''Additional classes on the trigger button.