Popover

A non-modal panel anchored to its trigger, for detail and small edits that should not take the page away from the user.

import from ~/components/ui/popover

Deployment budget

detail peek

A popover holds detail the user asked for and can walk away from. Nothing here is required to finish the task.

quick edit

A form is fine in a popover when it is one or two fields and a save. Anything a user could lose real work in belongs in a Dialog.

side and align

side picks the edge the panel grows from, align its position along that edge. Radix flips the panel automatically when it would leave the viewport.

Use it for secondary detail and small edits that keep the page context visible.

Anchor it to the control that opened it, and keep the contents to a screenful at most.

Escape closes it, a click outside closes it, and focus returns to the trigger.

Give an icon-only trigger an aria-label. The icon is not the accessible name.

Don't

Do not put critical content in a popover. It is dismissible and easy to miss, so it can never be the only place something is said.

Do not use it for a blocking decision or a long form. That is a Dialog.

Do not open it on hover. A hover panel that holds interactive content cannot be reached by keyboard or touch.

Do not use it for a plain text hint on hover. That is a Tooltip.