Prism Docs

import { Button, Popover } from '@mylighthouse/prism-react';
import { useId, useRef, useState } from 'react';

export default function BasicExample(): React.JSX.Element {
  const [open, setOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const popupId = useId();

  return (
    <>
      <Button
        aria-controls={popupId}
        aria-expanded={open}
        aria-haspopup="dialog"
        buttonType="secondary"
        onClick={() => setOpen(!open)}
        ref={triggerRef}
      >
        Open popover
      </Button>
      <Popover onOpenChange={setOpen} open={open}>
        <Popover.Content
          anchor={triggerRef}
          aria-label="More information"
          id={popupId}
          side="bottom"
        >
          <div className="flex flex-col gap-300 p-400">
            <p className="text-300--regular">
              This is a popover with arbitrary content. Use it for contextual
              actions or supplementary information.
            </p>
            <div className="flex justify-end">
              <Popover.Close>
                <Button buttonType="secondary" size="small">
                  Dismiss
                </Button>
              </Popover.Close>
            </div>
          </div>
        </Popover.Content>
      </Popover>
    </>
  );
}