Popover

Composition preview

Try Popover alongside its related overlays & menus components. These examples keep all actions local.

Usage

import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

<>
<Popover>
  <PopoverTrigger asChild><Button variant="outline">Options</Button></PopoverTrigger>
  <PopoverContent aria-label="Options">Contextual controls</PopoverContent>
</Popover>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

open/defaultOpen, onOpenChange; PopoverTrigger, PopoverContent, PopoverAnchor

Usage & accessibility

Provide a clear accessible name. Use Dialog when the task requires a modal workflow.

Implementation contract

src/components/ui/popover.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.