FORMS

Popover

Non-modal floating panel anchored to a trigger. Built on Radix Popover, painted with the same Memphis chrome as DropdownMenu and Dialog so floating surfaces feel consistent. Use it as the generic container for preferences, mini-editors, search results, or any non-menu floating content. For an action-list with the full ARIA menu pattern reach for DropdownMenu.

Import

1import {
2  Popover,
3  PopoverTrigger,
4  PopoverContent,
5  PopoverClose,
6} from 'damo-ui'

Live example

1<Popover>
2  <PopoverTrigger asChild>
3    <Button variant="outline">Open popover</Button>
4  </PopoverTrigger>
5  <PopoverContent className="w-72">
6    <h3 className="font-display text-lg mb-2">Quick settings</h3>
7    <p className="text-sm text-muted-foreground mb-3">
8      A non-modal floating panel anchored to the trigger.
9    </p>
10    <PopoverClose asChild>
11      <Button size="sm" variant="ghost">Close</Button>
12    </PopoverClose>
13  </PopoverContent>
14</Popover>

Alignment

Use align for inline alignment and side / sideOffset for the anchor edge.

<PopoverContent align="start" sideOffset={8}>…</PopoverContent>

Props

Popover props
PropTypeDefaultDescription
openboolean—Controlled open state on the root.
defaultOpenboolean—Uncontrolled initial open state on the root.
onOpenChange(open: boolean) => void—Fires when the open state changes.
modalbooleanfalseWhen true, focus is trapped while open and outside content is inert. Default is false (non-modal).
align'start' | 'center' | 'end''center'Prop on PopoverContent. Alignment of the content relative to the trigger.
side'top' | 'right' | 'bottom' | 'left''bottom'Prop on PopoverContent. Preferred edge to anchor against. Radix flips automatically when there is no room.
sideOffsetnumber6Gap between trigger and content.

Popover vs DropdownMenu vs Dialog

  • Popover — a free-form floating panel. Use it for forms, search results, help text, mini-editors.
  • DropdownMenu — a list of actions with full keyboard wiring (arrow keys cycle items). Reach for it whenever the content is a menu.
  • Dialog — a modal centred on the screen. Reach for it when the user must finish a task before continuing.

Accessibility

  • Trigger inherits Radix aria-expanded / aria-controls.
  • Default modal=false — focus is not trapped, and clicks outside dismiss the panel. Set modal=true when the popover hosts a complete task that should block other interactions.
  • Use PopoverClose on close affordances inside the content so focus returns to the trigger.
← ComboboxTooltip →