Popover

Closes the popover. Use render for a button: render={<Button>Done</Button>}.

import { Button } from "@etched/reticle/button";
import { PopoverClose, PopoverContent, PopoverDescription, PopoverRoot, PopoverTitle, PopoverTrigger } from "@etched/reticle/popover";

export function Preview() {
  return (
    <PopoverRoot>
      <PopoverTrigger render={<Button>Run 1,284</Button>} />
      <PopoverContent>
        <PopoverTitle>Run 1,284</PopoverTitle>
        <PopoverDescription>Passed on bench B-14 in 42 minutes.</PopoverDescription>
        <div className="row">
          <PopoverClose render={<Button size="sm">Done</Button>} />
        </div>
      </PopoverContent>
    </PopoverRoot>
  );
}

Installation

import { PopoverClose, PopoverContent, PopoverDescription, PopoverRoot, PopoverTitle, PopoverTrigger } from "@etched/reticle/popover";

Examples

Title, description and close

openOnHover opens the popover on hover as well as on click.

import { BellIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { PopoverClose, PopoverContent, PopoverDescription, PopoverRoot, PopoverTitle, PopoverTrigger } from "@etched/reticle/popover";

export function TitleDescriptionAndClose() {
  return (
    <div className="row">
      <PopoverRoot>
        <PopoverTrigger render={<Button shape="square" aria-label="Notifications" icon={<BellIcon />} />} />
        <PopoverContent>
          <PopoverTitle>Notifications</PopoverTitle>
          <PopoverDescription>You are all caught up.</PopoverDescription>
        </PopoverContent>
      </PopoverRoot>
      <PopoverRoot>
        <PopoverTrigger render={<Button>Run 1,284</Button>} />
        <PopoverContent align="start">
          <PopoverTitle>Run 1,284</PopoverTitle>
          <PopoverDescription>Passed on bench B-14 in 42 minutes.</PopoverDescription>
          <div className="row">
            <PopoverClose render={<Button size="sm">Done</Button>} />
          </div>
        </PopoverContent>
      </PopoverRoot>
      <PopoverRoot>
        <PopoverTrigger openOnHover delay={200} render={<Button variant="ghost">Hover for owner</Button>} />
        <PopoverContent>
          <PopoverTitle>Ana Ruiz</PopoverTitle>
          <PopoverDescription>Owns 12 chips at TPE-2.</PopoverDescription>
        </PopoverContent>
      </PopoverRoot>
    </div>
  );
}

Sides

import { Button } from "@etched/reticle/button";
import { PopoverContent, PopoverDescription, PopoverRoot, PopoverTrigger, type PopoverSide } from "@etched/reticle/popover";

const sides: PopoverSide[] = ["top", "right", "bottom", "left"];

export function Sides() {
  return (
    <div className="row">
      {sides.map((side) => (
        <PopoverRoot key={side}>
          <PopoverTrigger render={<Button variant="outline">{side}</Button>} />
          <PopoverContent side={side}>
            <PopoverDescription>On the {side}.</PopoverDescription>
          </PopoverContent>
        </PopoverRoot>
      ))}
    </div>
  );
}

API reference

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"bottom"
align	"start" \| "center" \| "end"	"center"
sideOffset	number	8	Pixels between the trigger and the popover.
alignOffset	number	0	Pixels along the alignment axis.
positionMethod	Positioner["positionMethod"]	"absolute"	`"fixed"` escapes sticky headers and other stacking contexts.
anchor	Positioner["anchor"]	–	Position against this element, ref or virtual element instead of the trigger.
className	string	–	Class on the panel, for layout such as width.
children	ReactNode	–