Popover
Rich, interactive content anchored to a trigger, such as quick settings, filters or a short form.Form fields
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, Popover } from '@advui/core'
<Popover>
<Popover.Trigger asChild>
<Button variant="outline">Dimensions</Button>
</Popover.Trigger>
<Popover.Content>
<Popover.Title>Dimensions</Popover.Title>
…
</Popover.Content>
</Popover>Examples
Controlled filter
Closes itself when the user applies the selection.Preview
Code
Showing: Active
API reference
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. |
defaultOpen | boolean | — | Starting `open` when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the popover opens or closes. |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Where to open relative to the trigger (flips when there is no room). |
align | 'start' | 'center' | 'end' | 'center' | Alignment along that side. |
offset | number | 8 | Gap to the trigger in px. |
Popover.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Use your own element (e.g. a Button) as the trigger. |
Popover.Content
Takes View props to style the panel; its width defaults to `72`.Popover.Title
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | Heading that names the dialog for screen readers. |
Popover.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Supporting text. |
Popover.Close
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Wrap a button that closes the popover. |
Accessibility
- The trigger exposes
aria-haspopup="dialog"andaria-expanded; the panel is adialognamed byPopover.Title. - Focus moves into the panel when it opens and returns to the trigger when it closes.
- Escape and a press outside close it.
- Prefer Dialog for tasks that must block the page, and Tooltip for short non-interactive hints.
| Key | Action |
|---|---|
| Enter / Space | Opens the popover from its trigger. |
| Tab / Shift + Tab | Moves focus through the panel. |
| Esc | Closes the popover and returns focus to the trigger. |
Responsive behavior
On phones and other touch screens narrower than the md breakpoint, the content opens in a bottom sheet instead.
Platform notes
Web
Floating panel positioned next to the trigger; flips and stays inside the viewport.
iOS
Opens as a bottom sheet that can be swiped away.
Android
Opens as a bottom sheet; the back gesture closes it.