Popover

A popover is a small overlay that appears on top of a component when it is clicked.

Import

import { Popover } from "@aeonkit/react";

Usage

Default

The default popover component.

Preview
Code

<Popover>
  <Popover.Trigger asChild>
    <Button aria-label="Update dimensions">
      <LuJapaneseYen className="text-white" />
    </Button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <div className="flex flex-col gap-2.5">
        <p className="text-sm text-slate-500">
          Habitasse platea dictumst vestibulum rhoncus est pellentesque. Cras
          fermentum odio eu feugiat pretium nibh ipsum. A diam sollicitudin
          tempor id.{" "}
        </p>
      </div>
      <Popover.Close />
      <Popover.Arrow />
    </Popover.Content>
  </Popover.Portal>
</Popover>

Props

API Interface: PopoverProps

API Interface: PopoverArrowProps

API Interface: PopoverCloseProps

API Interface: PopoverContentProps

API Interface: PopoverTriggerProps