Note: this component is primarily intended to be used as a utility component inside the Design System itself. There is likely another component in the Design System that already covers your use case.
Popovers are small overlays that open on demand, and close when the user clicks outside or presses the escape key. They let users access additional content and actions without cluttering the page.
The popover dialog has no dimensions of its own so it will expand or contract to contain the children provided. Consider this when using the popover, and be sure to provide appropriate styles for height and width.
If you need a list of actions use a
<DropdownMenu/>. For searchable options or for use within a form, use a
The positioning of the popover, relative to the trigger, can be adjusted.
Defines the appearance of the trigger button. Any component/element is fine as long as it accepts a
onClick, and the
triggerProps are spread onto it.
<Popover/> component is the easiest way to create a Popover, but if you need something more customised, you can do so by using the
<PopoverDialog/> combined with the
usePopover provides all of the neccesary logic for
<PopoverDialog/>, but both can be used independently.