Popover — Caustica Design Docs

Preview

Live

<div class="ui-popover">
  <button type="button" class="btn ui-popover__trigger"
    aria-haspopup="dialog" aria-expanded="false">
    Open popover
  </button>
  <!-- Content typically portaled when open -->
  <div class="ui-popover__content motion-pop" role="dialog"
    aria-label="Quick actions" tabindex="-1">
    <p class="msg">Pin this packet or copy the summary.</p>
    <div class="actions">…</div>
  </div>
</div>

import { Popover, PopoverTrigger, PopoverContent, Button } from 'caustica-design/core'
import 'caustica-design/css'

<Popover>
  <PopoverTrigger className="btn">Open popover</PopoverTrigger>
  <PopoverContent label="Quick actions">
    <p className="msg">Pin this packet or copy the summary.</p>
    <div className="actions">
      <Button variant="primary" compact>Pin</Button>
      <Button compact>Copy</Button>
    </div>
  </PopoverContent>
</Popover>

Variants

Content panel

.ui-popover__content — elevated surface for short actions or copy.

Drop-up

.is-drop-up flips transform-origin when placed above the trigger.

asChild trigger

React PopoverTrigger asChild merges props onto a single child (e.g. Button).

vs Filter

Filter is the specialized filter popover — use Popover for generic floating content.

See Filter.

API

HTML classes

Class	Description
`.ui-popover / .is-open`	Root wrapper (+ open stacking).
`.ui-popover__trigger`	Trigger control class.
`.ui-popover__content`	Floating panel (often portaled).
`.motion-pop`	Entry motion (respects reduced motion).
`.is-drop-up`	Placement above the trigger.

React props

From src/core/Popover.tsx — compound Popover* components.

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	`false`	Controlled / uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	—	Open state change callback.
`asChild`	`boolean`	`false`	PopoverTrigger — merge onto child element.
`label`	`string`	—	PopoverContent — required dialog accessible name.
`estimatedHeight`	`number`	`240`	Placement estimate (px).
`minWidth`	`number`	`200`	Minimum content width (px).