Popover

Try it

import {
  Button, Popover, PopoverClose, PopoverContent, PopoverDescription,
  PopoverTitle, PopoverTrigger, Switch,
} from "@arcadia/ui";

<Popover>
  <PopoverTrigger
    render={<Button variant="outline" iconEnd="chevron-down">Model parameters</Button>}
  />
  <PopoverContent>
    <PopoverTitle>Model parameters</PopoverTitle>
    <PopoverDescription>Applies to new turns in this chat.</PopoverDescription>
    <Switch label="Thinking" description="Show reasoning while it streams" defaultChecked />
    <Switch label="Fast mode" />
    <div {...sx("cmp-form-actions", cmp.formActions)}>
      <PopoverClose render={<Button size="sm">Cancel</Button>} />
      <PopoverClose render={<Button size="sm" variant="primary">Apply</Button>} />
    </div>
  </PopoverContent>
</Popover>

TSX

import {
  Button, Popover, PopoverContent, PopoverDescription, PopoverTitle,
  PopoverTrigger,
} from "@arcadia/ui";

<Popover>
  <PopoverTrigger render={<Button>Filters</Button>} />
  <PopoverContent size="sm" align="start">
    <PopoverTitle>Filters</PopoverTitle>
    <PopoverDescription>Show only chats that match.</PopoverDescription>
  </PopoverContent>
</Popover>

Click-opened and non-modal by default, on the shared popup surface with 12px padding. It may hold controls: switches, a field, a pair of buttons. PopoverClose wraps any button that should close it.

Which overlay? A Popover holds content you act on. A Menu lists actions or choices. A Hover Card previews what a link points to, and a Tooltip names a control in a few words.

Examples

Sizes

Three widths with the same padding, shrinking to fit their preview frame on a narrow screen.

240 wide

320 wide, the default

400 wide

Use collisionBoundary for a clipped frame. Placement and width stay inside it; rootStyle controls the preferred width and layout.

Knob	Takes	Default	Sets
	`TokenRef<Measure>`	`320px`	Width (240 / 320 / 400 by `size`), capped by the available boundary.

modal: boolean | "trap-focus"Defaultfalse; false: focus may leave, which closes it. true: focus is trapped and the page behind is inert. "trap-focus": focus is trapped, the page stays as it is.
open: boolean; Controlled open state.
defaultOpen: booleanDefaultfalse; Initial open state when uncontrolled.
onOpenChange: (open: boolean, details: OpenChangeDetails) => void; Called when the popup opens or closes, with why (details.reason) and the event.
onOpenChangeComplete: (open: boolean) => void; Called once the open or close transition has finished.

Usage

Examples

Sizes

Customising

Accessibility

API reference

PopoverTrigger4 props

PopoverContent14 props