Search

⌘K
Something

Popover

Popover is a component that allows users to display additional content when they click on an element. It is used to provide additional information or actions related to the element. There are 4 parts.

  • Popover : This is the top level component that is the wrapper of the popover.
  • PopoverButton : This is the button that will trigger the popover to open. You can pass the className to the button to customize the style of the button.
  • PopoverPanel : This is the container of the popover content. You can pass the anchor position to the component. And you can pass the children to the be the content.
  • PopoverBackdrop : This is the backdrop of the popover. You can pass the className to the backdrop to customize the style of the backdrop.

This components. Store at src/components/atoms/popover

Basic example

This is example of a popover component. You have to use these 4 parts.

ExampleCode

Popover attribute

children
ReactNode
This is the content of the popover.

Popover button attribute

id
string
This is the id of the popover button.
children
ReactNode (required)
This is the content of the popover button.
className
string
This is the class name of the popover button.

Popover panel attribute

id
string
This is the id of the popover button.
children
ReactNode (required)
This is the content of the popover button.
anchor
string
This is the anchor position of the popover button. You can pass the anchor position to the component.
className
string
This is the class name of the popover button.

Popover backdrop attribute

className
string
This is the class name of the popover backdrop.

Copyright 2025 by Prine Components

Term of service

|

Privacy statement