Biofarma | Bind UI

At a minimum, popovers should always have a title and a button to close or exit the container. For more information on available customizations, check out the Specifications tab.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import { Popover } from 'bio-bind-ui';

<Popover mode='dark' placement='left' />

Examples

Variant

Use variant for change variant of popover component: popover with image, popover information, popover profile and popover form

Mode (Optional)

Use mode for change color mode of popover component: light and dark

Props

Props	Required	Default	Type	Description
renderContent	`false`	-	`React.ReactNode`	The content of the popover, which receives a function `onClose` to close the popover.
placement	`false`	`top`	`top` `left` `bottom` `right`	Specifies the placement of the popover relative to the trigger (e.g., top, bottom, left, or right).
mode	`false`	`light`	`dark` `light`	The mode of the popover, determining its visual theme (e.g., light or dark).
children	`false`	-	`React.ReactNode`	The children or trigger element that opens the popover.
style	`false`	-	`React.CSSProperties`	The custom inline styles for the popover component.
className	`false`	-	`string`	The custom CSS class name to apply to the popover.
delay	`false`	-	`number`	The delay in milliseconds before the popover is shown.
showCloseIcon	`false`	-	`boolean`	For toggle show or hide close icon.

Divider Tooltip