Popover

Button that toggles a floating panel with any content. Closes on outside click and Escape.

Never clipped. Popover, ActionMenu, Select, DatePicker, DateRangePicker, TimePicker and NotificationCenter render their panels into the page body, so containers with overflow: hidden or scrolling cannot cut them off. They flip to the other side when there is no room, and placement chooses where they open.

Props

triggerReactNode
Trigger button content.
labelstring
Accessible label for the trigger and panel.
variantstring
Default: 'secondary'
Button variant of the trigger.
align'start' | 'end'
Default: 'start'
Shorthand for placement bottom-start / bottom-end.
placementstring
top | bottom | left | right | auto, optionally with -start / -end. Overrides align.
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
Panel content.

Popover props
Prop	Type	Default	Description
`trigger`	ReactNode	–	Trigger button content.
`label`	string	–	Accessible label for the trigger and panel.
`variant`	string	`'secondary'`	Button variant of the trigger.
`align`	'start' \| 'end'	`'start'`	Shorthand for placement bottom-start / bottom-end.
`placement`	string	–	top \| bottom \| left \| right \| auto, optionally with -start / -end. Overrides align.
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	Panel content.

Related hooks and theme:useDismissable