Popover

Floating popover component for displaying content in a layer.

Popover

Popover is an overlay component for displaying floating content anchored to a trigger element.

Import

import { Popover } from 'radix-native-ui';

Usage

import { Popover, Button, Text, Flex } from 'radix-native-ui';

<Popover.Root>
  <Popover.Trigger>
    <Button>Open Popover</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Flex direction="column" gap={2}>
      <Text weight="medium">Popover Title</Text>
      <Text size={2}>This is the popover content.</Text>
    </Flex>
  </Popover.Content>
</Popover.Root>

Components

Popover.Root

The root container component that manages popover state.

Popover.Trigger

Element that opens the popover. Defaults to merging props onto child element.

Popover.Content

The popover content container.

Popover.Close

Element that closes the popover.

Popover.Portal

Renders popover content in a Modal.

Popover.Overlay

Backdrop for popover. Closes popover when pressed.

Popover.Arrow

The arrow indicator pointing to the trigger.

Popover.Title

Accessible title for screen readers.

Popover.Description

Accessible description for screen readers.

Popover.Anchor

Optional anchor element for positioning.

Props

Popover.Root

Popover.Content

Popover.Close

Popover.Arrow

Popover.Title

Popover.Description

Popover.Portal

Popover.Overlay

Examples

Basic Popover

<Popover.Root>
  <Popover.Trigger>
    <Button>Show Info</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Text>This is additional information.</Text>
  </Popover.Content>
</Popover.Root>

Positioned Popover

<Popover.Root>
  <Popover.Trigger>
    <Button>Top Popover</Button>
  </Popover.Trigger>

  <Popover.Content side="top" sideOffset={8}>
    <Text>Popover on top</Text>
  </Popover.Content>
</Popover.Root>

User Profile Popover

<Popover.Root>
  <Popover.Trigger>
    <Avatar src="https://i.pravatar.cc/150" fallback="JD" />
  </Popover.Trigger>

  <Popover.Content>
    <Flex direction="column" gap={3}>
      <Flex direction="row" gap={3} align="center">
        <Avatar src="https://i.pravatar.cc/150" fallback="JD" size={4} />
        <Flex direction="column">
          <Text weight="medium">John Doe</Text>
          <Text size={2} color="gray">[e-mail]</Text>
        </Flex>
      </Flex>

      <Flex direction="column" gap={1}>
        <Button variant="ghost" justify="start">Profile</Button>
        <Button variant="ghost" justify="start">Settings</Button>
        <Button variant="ghost" justify="start" color="red">Sign Out</Button>
      </Flex>
    </Flex>
  </Popover.Content>
</Popover.Root>

Color Picker Popover

const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];

<Popover.Root>
  <Popover.Trigger>
    <Button>Choose Color</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Flex direction="column" gap={2}>
      <Text size={2} weight="medium">Select Color</Text>
      <Flex wrap="wrap" gap={2}>
        {colors.map(color => (
          <Box
            key={color}
            style={{
              width: 32,
              height: 32,
              backgroundColor: color,
              borderRadius: 4
            }}
          />
        ))}
      </Flex>
    </Flex>
  </Popover.Content>
</Popover.Root>

Controlled Popover

function ControlledPopover() {
  const [open, setOpen] = useState(false);

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger>
        <Button>Toggle</Button>
      </Popover.Trigger>

      <Popover.Content>
        <Flex direction="column" gap={2}>
          <Text>Popover content</Text>
          <Button size={1} onPress={() => setOpen(false)}>
            Close
          </Button>
        </Flex>
      </Popover.Content>
    </Popover.Root>
  );
}

With Actions

<Popover.Root>
  <Popover.Trigger>
    <IconButton>
      <Icon name="more-vertical" />
    </IconButton>
  </Popover.Trigger>

  <Popover.Content>
    <Flex direction="column" gap={1}>
      <Popover.Close>
        <Button variant="ghost" justify="start">
          <Icon name="pencil" /> Edit
        </Button>
      </Popover.Close>
      <Popover.Close>
        <Button variant="ghost" justify="start">
          <Icon name="copy" /> Duplicate
        </Button>
      </Popover.Close>
      <Popover.Close>
        <Button variant="ghost" justify="start" color="red">
          <Icon name="trash" /> Delete
        </Button>
      </Popover.Close>
    </Flex>
  </Popover.Content>
</Popover.Root>

Related

• Dialog - Dialog component
• Tooltip - Tooltip component
• DropdownMenu - Dropdown menu component