---
title: Popover
description: A floating panel for settings and details tied to a button.
---

```tsx
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](/deft/components/dialog) for a task with a submit action, and a [Menu](/deft/components/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `align?` | `"start" \| "center" \| "end"` | `"start"` | On Content. |
| `side?` | `"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"` | `"bottom"` | On Content. |

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](https://base-ui.com/react/components/popover).