Source: https://monarchui.dev/components/popover/

Components · Overlays

# Popover

Non-modal floating panel.

@rookcom/monarch-react

Component

## Filters

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

A non-modal floating panel for filters, pickers and quick edits, anchored to a trigger.

### Use when

- Interactive content that belongs to one control, such as a filter panel.

### Avoid when

- Plain descriptive text on hover: use Tooltip.
- A list of actions: use DropdownMenu.
- A blocking decision: use Dialog.

## Design principles

- Give the content an accessible name with `aria-label` or a heading.

## API reference

```tsx
import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Popover` | component | client | `.mn-popover` |
| `PopoverAnchor` | component | client | `.mn-popover` |
| `PopoverClose` | component | client | `.mn-popover` |
| `PopoverContent` | component | client | `.mn-popover` |
| `PopoverTrigger` | component | client | `.mn-popover` |

Root, Trigger, Anchor and Close are the Radix Popover parts.

PopoverContent defaults to `align="start"` and `sideOffset={6}` and renders in a portal.

Generated from the TypeScript declarations of `packages/react/src/components/overlays/popover`.

## Properties

### `Popover`

Non-modal floating panel for filters, pickers and quick edits.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `React.ReactNode` |  |

### `PopoverAnchor`

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` |  |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `PopoverClose`

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` |  |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `disabled` | `boolean` |  |
| `id` | `string` |  |

### `PopoverContent`

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` |  |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `PopoverTrigger`

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` |  |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `disabled` | `boolean` |  |
| `id` | `string` |  |

## Variants

Popover has no visual variants.

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Open / closed | `data-state` | From Radix; opens with `mn-pop-in`. |

## Interaction behaviour

- Clicking the trigger toggles the panel.
- Escape or a click outside closes it and focus returns to the trigger.

## Keyboard support

| Keys | Action |
| --- | --- |
| Enter / Space | On the trigger, opens the popover. |
| Escape | Closes it and returns focus to the trigger. |

## Accessibility

Role

dialog

Accessible name

aria-label

on PopoverContent.

- The trigger exposes `aria-haspopup="dialog"` and `aria-expanded`.

## Responsive behaviour

- Width fits content up to `min(24rem, 100vw - 2rem)`.

## Theme support

- Semantic surface, border and shadow tokens; themes apply automatically.

## Do and don't

### Do

- Name the popover content.

### Don't

- Do not use a popover for content the user must act on before continuing.

## Related components

- [Tooltip](https://monarchui.dev/components/tooltip/): Non-interactive hint text.
- [DropdownMenu](https://monarchui.dev/components/dropdown-menu/): Lists of actions.
- [Dialog](https://monarchui.dev/components/dialog/): Modal decisions.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-popover``react` |
| Monarch components | None |

## Testing coverage

- Opens on click and closes with Escape, returning focus to the trigger.
- No axe violations in the open panel (jsdom).
- Renders on the server (closed).

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/overlays/popover`

## All example code

### Filters

```tsx
import { Button, Checkbox, Popover, PopoverContent, PopoverTrigger } from '@rookcom/monarch-react';

<Popover>
  <PopoverTrigger asChild>
    <Button>Filters</Button>
  </PopoverTrigger>
  <PopoverContent aria-label="Filters">
    <Checkbox label="Only mine" defaultChecked />
    <Checkbox label="Unassigned" />
  </PopoverContent>
</Popover>
```