Popover

Popover is a component that floats around its anchor element. It's commonly used for building other components such as dropdowns, tooltips, combobox, etc.

Edit the code below to see your changes live!

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);

  return (
    <>
      <Button ref={setButtonRef} onClick={() => setIsOpen(true)}>
        Open Popover
      </Button>
      <Popover anchorElement={buttonRef} isOpen={isOpen} label="Example Popover" onClose={() => setIsOpen(false)}>
        <Text>This is the popover content!</Text>
      </Popover>
    </>
  );
}

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);
  return (
    <>
      <Button ref={setButtonRef} onClick={() => setIsOpen(true)}>
        Open Popover
      </Button>
      <Popover anchorElement={buttonRef} isOpen={isOpen} label="Example Popover" onClose={() => setIsOpen(false)}>
        <Text>This is the popover content!</Text>
      </Popover>
    </>
  );
}

API

Popover

Prop Name	Type	Default	Description
`anchorElement` *	`Element` \| `null`		Element to be used as an anchor for the Popover.
`isOpen` *	`boolean`		Specifies if the Popover is open or closed.
`label` *	`string`		Label used for accessibility purposes, this label will be set as an aria-label on the popover.
`closeOnClickOutside`	`boolean`	`true`	Determines if `onClose` gets called when clicking outside of the popover.
`closeOnEscKey`	`boolean`	`true`	Determines if `onClose` gets called when pressing the Esc key.
`matchAnchorElementWidth`	`boolean`	`false`	If set to true, the Popover will have the same width as its anchor element.
`skidding`	`number`	`0`	Determines the offset along the anchorElement.
`distance`	`number`	`4`	Determines the offset away from the anchorElement.
`onClose`	`() => void`		Callback that runs when the popover should close.
`placement`	`auto` \| `auto-end` \| `auto-start` \| `bottom` \| `bottom-end` \| `bottom-start` \| `left` \| `left-end` \| `left-start` \| `right` \| `right-end` \| `right-start` \| `top` \| `top-end` \| `top-start`	`auto`	Sets the position of the Popover.

Props ending with * are required

Inherited Props

Box Props

Padding Props

Beta