Popover

An accessible popup anchored to a trigger button.

Open popover

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

<Popover.Root>
  <Popover.Trigger>Open popover</Popover.Trigger>
  <Popover.Popup>
    <Popover.Title>Title</Popover.Title>
    <Popover.Description>Description</Popover.Description>
    <Popover.Close>Close</Popover.Close>
  </Popover.Popup>
</Popover.Root>;

Anatomy

The Popover compound component is made up of the following parts:

Part	Description
Popover.Root	Root context provider. Manages open state.
Popover.Trigger	Button that opens the popover.
Popover.Popup	The popup panel. Renders into a portal, positioned to the trigger.
Popover.Title	Accessible heading that labels the popover.
Popover.Description	Supporting text associated with the popover.
Popover.Close	Button that closes the popover.

Examples

Side

Control which side the popover appears on using the side prop on Popover.Popup.

toprightbottomleft

<Popover.Root>
  <Popover.Trigger>top</Popover.Trigger>
  <Popover.Popup side="top">
    <Popover.Title>Opens on top</Popover.Title>
    <Popover.Close>Close</Popover.Close>
  </Popover.Popup>
</Popover.Root>

API Reference

Popover.Root

Prop	Type	Default
children?	ReactNode	—
open?	boolean	—
onOpenChange?	(open: boolean) => void	—
defaultOpen?	boolean	—

Popover.Trigger

Prop	Type	Default
children?	ReactNode	—
className?	string	—
render?	ReactElement<unknown, string | JSXElementConstructor<any>>	<Button.Root variant="secondary" />

Popover.Popup

Prop	Type	Default
children?	ReactNode	—
className?	string	—
side?	"top" | "right" | "bottom" | "left"	bottom
sideOffset?	number	8
ref?	Ref<HTMLDivElement>	—

Popover.Title

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Popover.Description

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Popover.Close

Prop	Type	Default
children?	ReactNode	—
className?	string	—
render?	ReactElement<unknown, string | JSXElementConstructor<any>>	<Button.Root variant="secondary" />
ref?	Ref<HTMLDivElement>	—