PopoverItem

A standalone menu item: action or link.

The same component as Popover.Item. Pass href for navigation; use borderTop and borderBottom for separators and badge for a badge. Inside a Popover, the popup closes after a click.

Live example

Example controls

Usage

import { PopoverItem } from '@prosazhin/pbcomponents';

<PopoverItem href='/projects'>Projects</PopoverItem>;

Component API

PropType / variantsPurposeDefault
childrenstringComponent content.—
disabledbooleanDisables interaction.false
borderTopbooleanDivider above the item.false
borderBottombooleanDivider below the item.false
badgeReactElement<BadgeProps>Badge to the right of the label.—
leftIconSvgTypenone · check · search · userIcon before the text; accepts an SVG component.—
rightIconSvgTypenone · check · search · userIcon after the text; accepts an SVG component.—
leftIconClassNamestringClass of the left icon.—
rightIconClassNamestringClass of the right icon.—
onClick(event) => voidItem click handler; the popup closes afterwards.—
hrefstringRenders a link instead of a button.—
linkComponentElementTypeCustom link component, such as Next.js Link.—
target'_self' | '_blank'_self · _blankWhere to open the link._self
type'button' | 'reset' | 'submit'button · reset · submitHTML button type.button
classNamestringClass of the root element.—
wrapperClassNamestringClass of the outer wrapper.—
textClassNamestringClass of the text part.—

Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.