Popover

A floating panel anchored to a trigger. Use it for short, contextual content that does not block the rest of the page.

Anatomy

The trigger opens the popup. The popup carries the floating surface, the arrow that points back to the trigger, and the optional title and description for accessible naming.

The popup also accepts richer content. Drop in actions, lists, or any custom child to build settings menus, source previews, or compact forms.

API

Reference for each part of the component, including its available props and behavior.

Popover

Root of the popover. Tracks the open state and provides context to the trigger and popup. Forwards every prop to the underlying root, so the same controlled or uncontrolled patterns from Base UI apply here.

PopoverTrigger

The element that opens the popup. Pass a button, link, or any focusable element through render to bring custom visuals while keeping the open and accessibility wiring.

PopoverPopup

The floating panel. Wraps the portal, positioner, and popup so the author drops it in without wiring the three together. Carries the surface, ring, shadow, and arrow, and lays its children out in a column. Positioning props are forwarded to the positioner.

PopoverTitle

Accessible title for the popup. Pairs with the description to give screen reader users a clear summary of what the popup is about.

PopoverDescription

Supporting copy beneath the title. Use it for a one-line summary or a short explanation of the choice the user is about to make.