Popover

Anchored surface for light content next to a control. Use for details and short actions that stay in context.

Examples

Basic

With actions

Overview

Popover opens a positioned popup from a trigger. Compose portal, positioner, popup, title, and description. Style the trigger with Button via Base UI's render prop.

tsx

import {
  Button,
  Popover,
  PopoverTrigger,
  PopoverPortal,
  PopoverPositioner,
  PopoverPopup,
  PopoverTitle,
  PopoverDescription,
} from "@standard-ui/react"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Notifications
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverPositioner>
      <PopoverPopup>
        <PopoverTitle>Notifications</PopoverTitle>
        <PopoverDescription>
          You're all caught up.
        </PopoverDescription>
      </PopoverPopup>
    </PopoverPositioner>
  </PopoverPortal>
</Popover>

Usage

Trigger

Pass Button through render so the control keeps Standard UI styles without nesting buttons.

tsx

<PopoverTrigger render={<Button variant="outline" />}>
  Notifications
</PopoverTrigger>

Structure

Always include a title. Description is optional but helpful for context. Keep content short — prefer a dialog for longer flows.

tsx

<PopoverPopup>
  <PopoverTitle>Notifications</PopoverTitle>
  <PopoverDescription>
    You're all caught up.
  </PopoverDescription>
</PopoverPopup>

API

Parts mirror Base UI Popover. Prefer render={<Button />} on the trigger for consistent button styles.

Part	Role
Popover	Root state and open control.
PopoverTrigger	Opens the popover. Use Button via render.
PopoverPortal	Renders popup content outside the tree.
PopoverPositioner	Positions the popup relative to the trigger.
PopoverPopup	Surface for title, body, and actions.
PopoverTitle	Accessible popover title.
PopoverDescription	Supporting explanation.
PopoverClose	Dismisses the popover.
PopoverArrow	Optional arrow pointing at the trigger.