Popover

Storybook

Go to Story

PopoverRoot

const PopoverRoot: FC<PopoverProps> = PopoverPrimitive.Root;

Defined in: src/components/Popover/Popover.tsx:20

Root component for the Popover. Controls the open state of the popover.

Built on top of Radix UI Popover.

---

PopoverTrigger

const PopoverTrigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<HTMLButtonElement>> = PopoverPrimitive.Trigger;

Defined in: src/components/Popover/Popover.tsx:27

Element that triggers the popover to open when interacted with.

Can be used to wrap any interactive element that should activate the popover.

---

PopoverArrow

const PopoverArrow: ForwardRefExoticComponent<PopoverArrowProps & RefAttributes<SVGSVGElement>> = PopoverPrimitive.Arrow;

Defined in: src/components/Popover/Popover.tsx:34

Visual arrow element that points to the trigger.

Can be used to visually connect the popover to its trigger element.

---

PopoverHeader()

function PopoverHeader(__namedParameters): Element;

Defined in: src/components/Popover/Popover.tsx:50

Container for popover heading elements.

Typically contains PopoverTitle and/or PopoverDescription components. Provides consistent spacing and alignment for header content.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns

Element

Example

<PopoverHeader>
  <PopoverTitle>Settings</PopoverTitle>
  <PopoverDescription>Configure your preferences</PopoverDescription>
</PopoverHeader>

---

PopoverTitle()

function PopoverTitle(__namedParameters): Element;

Defined in: src/components/Popover/Popover.tsx:73

Displays the main heading of the popover content with appropriate styling. Typically used within PopoverHeader.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>>

Returns

Element

Example

<PopoverTitle>Account Settings</PopoverTitle>

---

PopoverDescription()

function PopoverDescription(__namedParameters): Element;

Defined in: src/components/Popover/Popover.tsx:90

Provides additional context or explanation below the PopoverTitle. Rendered with muted styling to create visual hierarchy.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>>

Returns

Element

Example

<PopoverDescription>Manage your account settings and preferences</PopoverDescription>

---

PopoverCloseX()

function PopoverCloseX(__namedParameters): Element;

Defined in: src/components/Popover/Popover.tsx:116

Close button component for the popover with an X icon.

Positioned in the top-right corner of the popover by default.

Parameters

Parameter	Type
__namedParameters	PopoverCloseProps & RefAttributes<HTMLButtonElement>

Returns

Element

Example

<PopoverContent>
  <PopoverCloseX />
  <PopoverHeader>
    <PopoverTitle>Settings</PopoverTitle>
  </PopoverHeader>
</PopoverContent>

---

PopoverContent()

function PopoverContent(__namedParameters): Element;

Defined in: src/components/Popover/Popover.tsx:156

Main content container for the Popover.

Handles portal, arrow support, styling and animations.

Parameters

Parameter	Type
__namedParameters	PopoverContentProps

Returns

Element

Example

<PopoverContent>
  <PopoverHeader>
    <PopoverTitle>Settings</PopoverTitle>
    <PopoverDescription>Configure your account</PopoverDescription>
  </PopoverHeader>
  <PopoverCloseX />
</PopoverContent>