Usage

Example Code

1import {
2Popover,
3PopoverContent,
4PopoverTrigger,
5} from "inc-design-system/popover";

Example Code

1<Popover>
2<PopoverTrigger>Open Popover Trigger</PopoverTrigger>
3<PopoverContent>Popover Content</PopoverContent>
4</Popover>

Props

Popover

For more props:

API Reference

Prop	Type	Description	Default
defaultOpen	boolean	Determines whether the popover is open by default.	No default value
open	boolean	Determines whether the popover is currently open.	No default value
onOpenChange	function	A function called when the visibility of the popover changes.	No default value
modal	boolean	Determines whether the popover is displayed as a modal.	false

PopoverTrigger

For more props:

API Reference

Prop	Type	Description	Default
asChild	boolean	Determines whether the trigger element is a child of the Popover component.	false

PopoverContent

For more props:

API Reference

Prop	Type	Description	Default
asChild	boolean	Determines whether the content element is a child of the Popover component.	false
onOpenAutoFocus	function	A function called when the content is opened and should receive focus.	No default value
onCloseAutoFocus	function	A function called when the content is closed and should receive focus.	No default value
onEscapeKeyDown	function	A function called when the 'Escape' key is pressed while the content is focused.	No default value
onPointerDownOutside	function	A function called when a pointer down event occurs outside of the content.	No default value
onFocusOutside	function	A function called when the content loses focus.	No default value
onInteractOutside	function	A function called when an interaction occurs outside of the content.	No default value
forceMount	boolean	Determines whether the content is force-mounted, ignoring visibility.	No default value
side	'left' \| 'right' \| 'bottom' \| 'top'	Determines the side from which the content appears.	'bottom'
sideOffset	number	Determines the offset from the side from which the content appears.	0
align	'start' \| 'end' \| 'center'	Determines the alignment of the content.	'center'
alignOffset	number	Determines the offset from the alignment of the content.	0
avoidCollisions	boolean	Determines whether the content avoids collisions with other elements.	true
collisionBoundary	Boundary[]	Specifies the boundary within which collisions are detected.	[]
collisionPadding	number \| Padding	Determines the padding used for collision detection.	0
arrowPadding	number	Determines the padding used for the arrow.	0
sticky	'none' \| 'partial' \| 'fixed'	Determines the sticky behavior of the content.	'partial'
hideWhenDetached	boolean	Determines whether the content is hidden when detached.	false