Ariakit
/
/
This site is under construction Subscribe to updates

Popover

Show a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.

import { Button } from "ariakit/button";
import {
  Popover,
  PopoverArrow,
  PopoverDescription,
  PopoverDisclosure,
  PopoverHeading,
  usePopoverState,
} from "ariakit/popover";
import "./style.css";

export default function Example() {
  const popover = usePopoverState();
  return (
    <>
      <PopoverDisclosure state={popover} className="button">
        Accept invite
      </PopoverDisclosure>
      <Popover state={popover} className="popover">
        <PopoverArrow className="arrow" />
        <PopoverHeading className="heading">Team meeting</PopoverHeading>
        <PopoverDescription>
          We are going to discuss what we have achieved on the project.
        </PopoverDescription>
        <div>
          <p>12 Jan 2022 18:00 to 19:00</p>
          <p>Alert 10 minutes before start</p>
        </div>
        <Button className="button">Accept</Button>
      </Popover>
    </>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

usePopoverState()

<PopoverAnchor|PopoverDisclosure>
  <PopoverDisclosureArrow />
</PopoverAnchor|PopoverDisclosure>
<Popover>
  <PopoverArrow />
  <PopoverHeading />
  <PopoverDescription />
  <PopoverDismiss />
</Popover>