Popover
Click-open anchored panel for secondary content — filters, previews, small forms. Unlike Tooltip it stays open, traps nothing and closes on outside click or Escape.
Preview
Live preview
Usage
Examples
Filter panel
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Filters</Button>
</PopoverTrigger>
<PopoverContent align="start" className="w-64">
<FilterForm />
</PopoverContent>
</Popover>Controlled open
const [open, setOpen] = useState(false)
<Popover open={open} onOpenChange={setOpen}>…</Popover>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen | boolean | false | Controlled or uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Fires on click-outside, Escape or trigger toggle. |
| PopoverContent side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred placement; flips automatically near viewport edges. |
| PopoverContent align | "start" | "center" | "end" | "center" | Alignment along the trigger edge. |
| PopoverContent sideOffset | number | 6 | Gap in pixels between trigger and panel. |
| PopoverTrigger asChild | boolean | — | Uses your own element as the opener (Radix Slot). |
Accessibility
Accessibility notes
- The content renders role="dialog" with aria-labelledby only if you pass a title — always name the panel.
- The trigger gets aria-expanded and aria-controls while open.
- Escape closes and returns focus to the trigger; a click outside closes without moving focus.
- The panel is portalled, so it escapes overflow:hidden ancestors and keeps its own focus scope.
- Do not put content that must be reachable without a click here — use visible text instead.