Component · 15

Popover

A small panel anchored to a button, for extra content or a short form. Raised with a hard shadow, closes on Escape or an outside click, and gives focus back to the button. Built on Base UI.

Default

tsx

<Popover>
  <PopoverTrigger render={<Button />}>Display</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Display</PopoverTitle>
    <PopoverDescription>Choose how the page looks to you.</PopoverDescription>
    <PopoverClose render={<Button variant="ghost" size="sm" />}>Done</PopoverClose>
  </PopoverContent>
</Popover>

With a field

Any content works inside. Focus moves into the panel when it opens.

tsx

<Popover>
  <PopoverTrigger render={<Button variant="primary" />}>Rename</PopoverTrigger>
  <PopoverContent align="start">
    <PopoverTitle>Rename file</PopoverTitle>
    <label>
      Name <Input defaultValue="notes.md" />
    </label>
  </PopoverContent>
</Popover>

Placement

tsx

<PopoverContent side="right" align="start">…</PopoverContent>

Props

Prop	Type	Default	Description
Popover open / defaultOpen / onOpenChange	-	closed	Open it uncontrolled, or control it from state.
Popover modal	boolean \| "trap-focus"	false	Modal blocks the page behind it. Put a PopoverClose inside if you use it.
PopoverTrigger render	ReactElement	<button>	Use your own button: render={<Button />}.
PopoverContent side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side. It flips if there is no room.
PopoverContent align	"start" \| "center" \| "end"	"center"	Alignment along that side.
PopoverContent sideOffset	number	8	Gap in pixels between trigger and panel.
PopoverTitle	-	recommended	The panel's accessible name.
PopoverDescription	-	optional	The panel's accessible description.

A popover is for optional detail. If the person must answer before going on, use Dialog; for a list of actions, use Menu.