Popover

Popover provides a styled actionable popup. It exports 3 components that combine to create our popover. The Popover.Trigger renders a <button> by default, but this can be overridden with the asChild prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).

Also, note that the component must accept a ref.

Read more about the underlying UI component on the Radix UI documentation site.

<Popover>
  <Popover.Trigger asChild>
    <Button>Click me</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Heading size="xs" className="mb-3">
      Popover
    </Heading>
    <Text size="sm">
      The "Popover" can display any type of element as a trigger and has the content hidden by default
    </Text>
  </Popover.Content>
</Popover>

API Reference