Beta Preview

Popover

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

Theme
placement 
 
 
shouldFlip 
Example
Popover.tsx
Popover.css
import {DialogTrigger} from 'react-aria-components';
import {Popover} from './Popover';
import {Button} from './Button';
import {Switch} from './Switch';
import {Settings2} from 'lucide-react';

function Example(props) {
  return (
    <DialogTrigger>
      <Button aria-label="Settings">
        <Settings2 size={20} />
      </Button>
      <Popover {...props}>
        <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
          <Switch defaultSelected>Wi-Fi</Switch>
          <Switch defaultSelected>Bluetooth</Switch>
          <Switch>Mute</Switch>
        </div>
      </Popover>
    </DialogTrigger>
  );
}

Custom trigger

DialogTrigger works with any pressable React Aria component (e.g. Button, Link, etc.). Use the <Pressable> component or usePress hook to wrap a custom trigger element such as a third party component or DOM element.

import {Pressable, DialogTrigger} from 'react-aria-components';
import {Popover} from './Popover';

<DialogTrigger>
  <Pressable>
    <span role="button">Custom trigger</span>
  </Pressable>
  <Popover style={{padding: 16}}>
    This popover was triggered by a custom button.
  </Popover>
</DialogTrigger>

const CustomTrigger = React.forwardRef((props, ref) => (
  <button {...props} ref={ref} />
));

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 will be positioned relative to me
import {useState, useRef} from 'react';
import {Popover} from './Popover';
import {Heading} from 'react-aria-components';
import {Button} from './Button';

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

  return (
    <div>
      <Button onPress={() => setOpen(true)}>Trigger</Button>
      <span ref={triggerRef} style={{paddingLeft: 12}}>Popover will be positioned relative to me</span>
      <Popover
        style={{padding: 16}}
        triggerRef={triggerRef}
        isOpen={isOpen}
        onOpenChange={setOpen}>
        I'm over here!
      </Popover>
    </div>
  );
}

API

Arrow (optional)Popover