Popover

A Popover opens from its trigger, such as a Button or an IconButton, which must take a ref and props: it receives the press handler, aria-haspopup and aria-expanded. title is a heading at the top that names it; without one, name it with aria-label. children is its content.

A small form

A function child receives close, for an action inside that closes the popover once it is done, such as a form's submit.

<Popover aria-label="Rename document" width="lg" trigger={<Button>Rename</Button>}>
  {(close) => (
    <form onSubmit={(event) => rename(event, close)}>
      <TextField label="Name" name="name" required />
      <Button variant="secondary" onClick={close}>
        Cancel
      </Button>
      <Button type="submit">Rename</Button>
    </form>
  )}
</Popover>

Controlled

Leave it uncontrolled, with defaultOpen to start open, or control it with open and onOpenChange, which receives the requested state and why: the trigger, Esc, a press outside, focus leaving it, or close as close-press.

<Popover
  title="Assignees"
  open={open}
  onOpenChange={(next) => {
    setOpen(next);
    if (next) setDraft(applied); // Each time it opens, start from the filters in use.
  }}
  trigger={<Button startIcon={<IconFilterList />}>Assignees</Button>}
>
  {people.map((person) => (
    <Checkbox
      key={person}
      label={person}
      checked={draft.includes(person)}
      onCheckedChange={(checked) => toggle(person, checked)}
    />
  ))}
  <Button
    onClick={() => {
      setApplied(draft);
      setOpen(false);
    }}
  >
    Apply
  </Button>
</Popover>

Width, side and alignment

width sets how wide the popover grows with its content: md, the default, from 12 rem up to 20 rem, or lg, from 20 rem up to 28 rem; it narrows to fit the window. side is bottom, the default, top, left, right, or inline-start and inline-end, which follow the text direction; it flips to the other side without room. align is start, center, the default, or end.

<Popover
  title="Billing periods"
  side="right"
  align="start"
  trigger={<IconButton variant="text" icon={<IconHelp />} aria-label="About billing periods" />}
>
  <Text>Members added later are billed from the next period.</Text>
</Popover>

Every popup, a popover, a menu, a Select's or a Combobox's list, a picker, a hover card, rich text suggestions and the command palette, is frosted. Three properties, set on a .env-theme boundary, change them all:

• --env-popup-opacity, 88 % in light and 90 % in dark, how much of the popup's color covers what is behind it; 100% makes popups solid. The color is --env-color-bg-popup.
• --env-popup-blur, 1.375 rem, the blur of what shows through, with a little more saturation.
• --env-popup-shadow, a soft shadow in the text's color in light and a deeper shade of the page in dark: with the avatars', envUI's only shadow.

In dark a faint hairline of the text color keeps a frosted popup's edge, where its shadow barely shows. At high contrast, with reduced transparency and under forced colors popups are solid, with their elevation edge and no blur or shadow; at high contrast the edge is a modal's, --env-elevation-3-border, the strongest. Tooltips are frosted too, at --env-tooltip-opacity with a smaller --env-tooltip-shadow, as Tooltip describes.

className, style, ref and data attributes reach the surface, env-popover, which has data-width="lg" when large and renders on PopupSurface in the trigger's text direction and theme. Its title is env-popover-title.