Popover

A floating panel for settings and details tied to a button.

import { Button, Popover } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function PopoverBasic() {
  return (
    <Preview overlay={true}>
      <Popover.Root>
        <Popover.Trigger render={<Button.Root />}>Open popover</Popover.Trigger>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Root>
    </Preview>
  );
}

• Use a popover for a few controls that change the view, or details about the item on the trigger. Use a Dialog for a task with a submit action, and a Menu for a list of actions.
• Popover.Title labels the popup for screen readers; Popover.Description adds a line of context under it.
• Set the width on Popover.Content.
• Popover.Content aligns to the start of the trigger and opens below it; pass align and side to move it.

API

Parts: Root, Content, Description, Title, plus the other Base UI Popover parts, such as Trigger and Close. Content wraps Portal, Positioner and Popup. Built on Base UI Popover.