Click-triggered floating content that can hold real interactive elements — unlike Tooltip, focus can move into it, and it stays open until dismissed. For a list of choices with roving keyboard navigation, use Dropdown instead; this is for arbitrary content (a mini form, a settings panel, ...).
tsx
<Popover>
...
</Popover>Examples
trigger opens it on click, same as Dialog/Dropdown — but unlike a Dialog, the content stays
anchored to the trigger and doesn't dim the rest of the page:
tsx
<Popover trigger={<IconButton icon="settings" aria-label="View options" />} placement="bottom-end">
<Column gap="8" padding="16">
<Switch label="Show hidden files" />
<Switch label="Compact rows" />
</Column>
</Popover>placement is a hint, not a guarantee — floating-ui flips it to whichever side actually has room
when the preferred one would overflow the viewport.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | — | — |
| onOpenChange | readonly | — | — |
| open | boolean | — | — |
| placement | top | right | bottom | left | top-start | top-end | right-start | right-end | bottom-start | bottom-end | left-start | left-end | bottom-start | — |
| trigger * | readonly | — | A single focusable element that opens the popover on click. |