Popover

Open

Contract

Overview

Machine-readable contract from Component Spec.

component: popoverexport: PopOverversion: 1attributes: data-refineui=popover

Anatomy

Part	data-refineui
root	popover-root

States

Scope	Category	Values
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
popover	div	dialog

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	trap	true
behavior	initial	first-focusable
behavior	return	trigger

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Popover, PopoverTrigger, PopoverContent, Button } from "@refineui/react";

<Popover>
  <PopoverTrigger>
    <Button>Show Info</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Additional information here</p>
  </PopoverContent>
</Popover>

<Popover open={isOpen} onOpenChange={setIsOpen}>
  <PopoverTrigger>
    <Button>Toggle</Button>
  </PopoverTrigger>
  <PopoverContent placement="top" align="center">
    <p>Popover content</p>
  </PopoverContent>
</Popover>

API Reference

Popover

Prop	Default	Type	Description
open	—	boolean	Controlled open state.
defaultOpen	—	boolean	Uncontrolled initial open state.
onOpenChange	—	(open: boolean) => void	Event handler when open state changes.

PopoverTrigger

Trigger element that opens the popover.

PopoverContent

Prop	Default	Type	Description
placement	"bottom"	"top" | "bottom" | "left" | "right"	Position relative to trigger.
align	"center"	"start" | "center" | "end"	Alignment along the edge.