Popover

import { Popover } from '@yarcl/react';

Filters

<Popover>
  <Popover.Trigger>
    <Button variant="outline">Filters</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Checkbox>Archived</Checkbox>
  </Popover.Content>
</Popover>

• Positioned with Floating UI: it flips and shifts to stay on screen.
• Closes on Esc and outside click; focus returns to the trigger.
• modal traps focus inside while open.

For lists, use Menu, Select or Combobox instead.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Popover

Prop	Type	Default	Description
children	ReactNode		Popover.Trigger and Popover.Content.
defaultOpen	boolean	false	Initial open state when uncontrolled.
modal	boolean	false	Traps focus inside the content while open.
onOpenChange	(open: boolean) => void		Called when the popover opens or closes.
open	boolean		Controlled open state.
placement	Placement	'bottom'	Preferred side. Flips when there isn't room.

Popover.Content

Prop	Type	Default	Description
initialFocus	number | RefObject<HTMLElement | null>	0	Element focused when the content opens: an index into its tabbable elements, or a ref.
padding	Responsive<Spacing>config	config.defaults.padding	Inner padding, from the spacing config. Accepts a scalar or breakpoint map.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.