Navigation and interaction

Popover

Light-dismiss non-modal floating content.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Popover } from "@cofob/design-system-react";

/**
 * Complete Popover parameter reference.
 * @param open/defaultOpen
 *   type: boolean; controlled or initial state
 *   default: false
 *   example: true
 * @param onOpenChange
 *   type: (open: boolean) => void
 *   default: —
 *   example: {handleOpenChange}
 * @param trigger
 *   type: ReactNode | Svelte snippet with trigger controls
 *   default: —
 *   example: <Button>Open</Button> / trigger snippet
 * @param triggerLabel/label
 *   type: string
 *   default: "Toggle popover" / "Open popover"
 *   example: "Accessible label"
 * @param placement
 *   type: "top" | "right" | "bottom" | "left"
 *   default: "bottom"
 *   example: "bottom"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function PopoverExample() {
  return (
    <Popover trigger="Open">Content</Popover>
  );
}

Svelte

<script lang="ts">
  import { Popover } from "@cofob/design-system-svelte";

  // Complete Popover parameter reference.
  // open/defaultOpen
  //   type: boolean; controlled or initial state
  //   default: false
  //   example: true
  // onOpenChange
  //   type: (open: boolean) => void
  //   default: —
  //   example: {handleOpenChange}
  // trigger
  //   type: ReactNode | Svelte snippet with trigger controls
  //   default: —
  //   example: <Button>Open</Button> / trigger snippet
  // triggerLabel/label
  //   type: string
  //   default: "Toggle popover" / "Open popover"
  //   example: "Accessible label"
  // placement
  //   type: "top" | "right" | "bottom" | "left"
  //   default: "bottom"
  //   example: "bottom"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Popover label="Open">Content</Popover>

HTML

<!--
  Complete Popover parameter reference.
  open/defaultOpen
    type: boolean; controlled or initial state
    default: false
    example: true
  onOpenChange
    type: (open: boolean) => void
    default: —
    example: {handleOpenChange}
  trigger
    type: ReactNode | Svelte snippet with trigger controls
    default: —
    example: <Button>Open</Button> / trigger snippet
  triggerLabel/label
    type: string
    default: "Toggle popover" / "Open popover"
    example: "Accessible label"
  placement
    type: "top" | "right" | "bottom" | "left"
    default: "bottom"
    example: "bottom"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-popover" popover data-cf-popover>Content</div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-popover`
Adapters	Native · React · Svelte
Primary props	open/defaultOpen · onOpenChange · trigger · triggerLabel/label · placement · children · div attributes
Documented states	closed · open · light-dismiss
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`open/defaultOpen`	`boolean; controlled or initial state`	`false`	React · Svelte · HTML	`true`	Use open/bind:open for controlled state or defaultOpen for initial state.
`onOpenChange`	`(open: boolean) => void`	`—`	React · Svelte · HTML	`{handleOpenChange}`	Reports every user-driven open state transition.
`trigger`	`ReactNode \| Svelte snippet with trigger controls`	`—`	React · Svelte · HTML	`<Button>Open</Button> / trigger snippet`	Trigger content; Svelte snippets receive accessible trigger controls.
`triggerLabel/label`	`string`	`"Toggle popover" / "Open popover"`	React · Svelte · HTML	`"Accessible label"`	Accessible trigger name; adapter name differs.
`placement`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	React · Svelte · HTML	`"bottom"`	Preferred side; collision handling may choose a safer position.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.