Popover

A floating panel anchored to a trigger, built on Radix Popover with Hummingbird's popover styling.

Default

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  Button,
} from "@hummingbirdui/react";

export default function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Popover title</PopoverHeader>
        <PopoverBody>
          And here&apos;s some amazing content. It&apos;s very engaging. Right?
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );
}

Placement

Use side and align to position PopoverContent relative to the trigger.

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  Button,
} from "@hummingbirdui/react";

export default function PopoverPlacement() {
  return (
    <div className="flex flex-wrap gap-2">
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Top</Button>
        </PopoverTrigger>
        <PopoverContent side="top">
          <PopoverBody>Opens above the trigger.</PopoverBody>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Right</Button>
        </PopoverTrigger>
        <PopoverContent side="right">
          <PopoverBody>Opens to the right.</PopoverBody>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Bottom</Button>
        </PopoverTrigger>
        <PopoverContent side="bottom">
          <PopoverBody>Opens below the trigger.</PopoverBody>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Left</Button>
        </PopoverTrigger>
        <PopoverContent side="left">
          <PopoverBody>Opens to the left.</PopoverBody>
        </PopoverContent>
      </Popover>
    </div>
  );
}

With a Close Button

PopoverClose dismisses the popover from within the content.

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverClose,
  Button,
  CloseButton,
} from "@hummingbirdui/react";

export default function PopoverWithClose() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Dismissable</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader className="flex items-center justify-between">
          Heads up
          <PopoverClose asChild>
            <CloseButton />
          </PopoverClose>
        </PopoverHeader>
        <PopoverBody>
          Click the close button to dismiss this popover.
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );
}

Controlled

Use open with onOpenChange to control the popover state.

State: closed

tsx

import * as React from "react";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  Button,
} from "@hummingbirdui/react";

export default function PopoverControlled() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex items-center justify-center gap-3">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button>Toggle popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverHeader>Controlled</PopoverHeader>
          <PopoverBody>
            The open state is driven by React through <code>open</code> and{" "}
            <code>onOpenChange</code>.
          </PopoverBody>
        </PopoverContent>
      </Popover>
      <span className="text-sm">State: {open ? "open" : "closed"}</span>
    </div>
  );
}

API Reference

For detailed usage guidelines, see the Radix UI documentation.

PopoverHeader and PopoverBody render the popover's header and body regions. Each accepts a className.

Styling

Hummingbird React popover is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available popover classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousPaginationNextTable