Popover

A popover is an overlay element positioned relative to a trigger.

placement

size

offset

crossOffset

shouldFlip

hideArrow

import {Popover, DialogTrigger, ActionButton, CheckboxGroup, Checkbox, Form} from '@react-spectrum/s2';
import Filter from '@react-spectrum/s2/icons/Filter';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  return (
    <DialogTrigger>
      <ActionButton aria-label="Filters">
        <Filter />
      </ActionButton>
      <Popover {...props} size="S">
        <Form>
          <CheckboxGroup label="Stops">
            <Checkbox value={0}>Non-stop</Checkbox>
            <Checkbox value={1}>1 stop</Checkbox>
            <Checkbox value={2}>2+ stops</Checkbox>
          </CheckboxGroup>
          <CheckboxGroup label="Bags">
            <Checkbox value={0}>Carry on</Checkbox>
            <Checkbox value={1}>Checked bag</Checkbox>
          </CheckboxGroup>
          <CheckboxGroup label="Times">
            <Checkbox value={0}>Morning</Checkbox>
            <Checkbox value={1}>Afternoon</Checkbox>
            <Checkbox value={2}>Evening</Checkbox>
          </CheckboxGroup>
        </Form>
      </Popover>
    </DialogTrigger>
  );
}

Custom anchor

To position a popover relative to a different element than its trigger, use the triggerRef and isOpen props instead of <DialogTrigger>. onOpenChange will be called when the user closes the popover.

Popover appears here

import {Popover, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState, useRef} from 'react';

function Example() {
  let [isOpen, setOpen] = useState(false);
  let triggerRef = useRef(null);

  return (
    <div style={{display: 'flex', gap: '12px', alignItems: 'center'}}>
      <Button onPress={() => setOpen(!isOpen)}>
        Open popover
      </Button>
      <div 
        ref={triggerRef}
        className={style({
          padding: 8, 
          backgroundColor: 'gray-100', 
          borderRadius: 'default',
          font: 'ui'
        })}>
        Popover appears here
      </div>
      <Popover 
        triggerRef={triggerRef}
        isOpen={isOpen}
        onOpenChange={setOpen}>
        <div className={style({font: 'ui'})}>
          Popover with custom trigger reference
        </div>
      </Popover>
    </div>
  );
}

<Example />

API

<DialogTrigger>
  <Button />
  <Popover>
    {/* ... */}
  </Popover>
</DialogTrigger>

DialogTrigger

Name	Type
`children`	`ReactNode`

Name	Type	Default
`hideArrow`	`boolean`	Default: `false`
Whether a popover's arrow should be hidden.
`size`	`'S' \| 'M' \| 'L'`	Default: —
The size of the Popover. If not specified, the popover fits its contents.
`triggerRef`	`RefObject<Element \| null>`	Default: —
The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.
`placement`	`Placement`	Default: `'bottom'`
The placement of the element with respect to its anchor element.
`children`	`ReactNode \| (opts: DialogRenderProps) => ReactNode`	Default: —
Children of the dialog. A function may be provided to access a function to close the dialog.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.