Balance Logo
Balance
Reckon Design System

Popover

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.
Install
pnpm add @reckon-web/popover
Import usage
import {
usePopover,
Popover,
PopoverDialog,
Popper,
Manager,
Reference,
usePopper
} from '@reckon-web/popover';
  • Code
  • API

Popover

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 <Select/>

Open in Playroom

Placement

The positioning of the popover, relative to the trigger, can be adjusted.

  • top
  • top-start
  • top-end
  • left
  • left-start
  • left-end
  • right
  • right-start
  • right-end
  • bottom
  • bottom-start
  • bottom-end

Trigger

Defines the appearance of the trigger button. Any component/element is fine as long as it accepts a ref and onClick, and the triggerProps are spread onto it.

PopoverDialog and usePopover

The <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 hook.

usePopover provides all of the neccesary logic for <PopoverDialog/>, but both can be used independently.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.