Popover

Generic popover primitive built on react-aria-components — a floating panel anchored to a trigger. Token-driven and domain-agnostic.

import { Popover } from "@evolve-storefront/ui/popover";

Preview

DefaultOpen in Storybook ↗

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">{t("addToList")}</Button>
  </PopoverTrigger>
  <PopoverContent aria-label={t("addToList")}>
    <p>{t("addToListDescription")}</p>
    <PopoverClose asChild>
      <Button>{t("done")}</Button>
    </PopoverClose>
  </PopoverContent>
</Popover>;

Props

Prop	Type	Description
open?	boolean	Controlled open state. Omit to let the popover own it.
defaultOpen?	boolean
onOpenChange?	((open: boolean) => void)
children?	ReactNode

Change the layout

Pass children to Popover to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/popover.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">{t("addToList")}</Button>
  </PopoverTrigger>
  <PopoverContent aria-label={t("addToList")}>
    <p>{t("addToListDescription")}</p>
    <PopoverClose asChild>
      <Button>{t("done")}</Button>
    </PopoverClose>
  </PopoverContent>
</Popover>;

PopoverCloseCloses the popover on click.

Prop	Type	Description
asChild?	boolean

Any other props go to the root element, like on a plain HTML element.

PopoverContentThe floating panel, anchored to the trigger.

Prop	Type	Description
placement?	PopoverPlacement
offset?	number	Gap between trigger and popover, in px.
children?	ReactNode

Any other props go to the root element, like on a plain HTML element.

PopoverTriggerToggles the popover on click and anchors it.

Prop	Type	Description
asChild?	boolean

Any other props go to the root element, like on a plain HTML element.

Examples

Align Start

// Aligned to the trigger's start edge instead of the default bottom end.
<Popover>
  <PopoverTrigger asChild><Button variant="secondary">{t("filters")}</Button></PopoverTrigger>
  <PopoverContent placement="bottom start">…</PopoverContent>
</Popover>;

Open in Storybook ↗

Side Right

// Opens beside the trigger, on the end side in the reading direction.
<PopoverContent placement="end">…</PopoverContent>;

Open in Storybook ↗