title: "Popover" slug: "/packages/popover" category: "overlay" componentNames:

• "Popover"

Popover

The Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

import Popover from "@ds-kit/popover"

Basic Example

A basic example of an Popover component can look like this:

<Popover disclosure={<Button variant="primary">Open popover</Button>}>
  Custom popover
</Popover>

Popover with custom children

<Popover disclosure={<Button variant="primary">Open popover</Button>}>
  <Div width="6rem" height="6rem" bg="primary" borderRadius="100%" />
</Popover>

Popover using popoverStateProps to set placement

<Popover
  placement="auto-end"
  disclosure={<Button variant="primary">Open popover</Button>}
>
  Custom very-very-very long popover text
</Popover>