display contract
Popover
Click-triggered floating panel for richer content than a tooltip.
Variants
- default
- Anchored to a trigger
- menu
- Behaves as a menu — keyboard navigation, role="menu"
- form
- Holds a small form; primary action closes the popover on success
Sizes
- sm
- 240pt wide
- md
- 320pt wide
- lg
- 480pt wide
Slots
- header
- content
- footer
Example
<Popover><PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger><PopoverContent>...</PopoverContent></Popover>Usage rule
Close on outside click, Escape, and any keyboard navigation that leaves the panel.
The full Popover contract has 4 more rules, plus the do-not patterns. Get the full recipe.