Popover
A small panel anchored to the button that opened it, holding a few controls or a short piece of content. The page stays usable; a click outside closes it.
Preview
When to use
- For settings or filters that belong to one control: display options, a share panel, a date range.
- For richer content than a tooltip can hold — a link, a button, a short form.
- When the panel should stay next to its trigger rather than take over the page.
Reach for something else
- For a single line of text on hover: that is a Tooltip.
- For a task that must be finished or cancelled before anything else: that is a Modal.
Anatomy
- 1
Trigger
A button that shows whether the panel is open.
- 2
Panel
White surface, 12px radius, hairline ring, a small gap from the trigger.
- 3
Arrow
Optional notch pointing back at the trigger.
- 4
Content
A heading and a few controls, links or lines of text.
States
Closed
Only the trigger is drawn.
Open
The panel sits on the chosen side; the trigger shows its pressed state.
Placement
Top, right, bottom or left, flipping when there is no room.
Dismissed
A click outside, Escape or the trigger again closes it.
Accessibility
- The trigger is a <button> with aria-expanded and aria-controls pointing at the panel.
- A panel with controls is role="dialog" with an accessible name; focus moves into it on open.
- Escape closes the panel and returns focus to the trigger; Tab moves through its controls in order.
Source
The Popover is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block