Popover

Filters

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>

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

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

Name the popover content.

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

Tooltip: Non-interactive hint text.
DropdownMenu: Lists of actions.
Dialog: Modal decisions.

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-popoverreact`
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