Popover

A bubble anchored to its trigger.

A panel that opens anchored to an element. If you need to trap focus, use Dialog; for a caption alone, Tooltip.

export const client = "only";

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
  Button,
  Label,
  Input,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>表示件数</PopoverTrigger>
      <PopoverContent align="start" className="w-72">
        <PopoverHeader>
          <PopoverTitle>表示件数</PopoverTitle>
          <PopoverDescription>1 ページあたりの行数を変えます。</PopoverDescription>
        </PopoverHeader>
        <div className="grid gap-2 pt-3">
          <Label htmlFor="rows">行数</Label>
          <Input id="rows" type="number" defaultValue={25} />
        </div>
      </PopoverContent>
    </Popover>
  );
}

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from "@squadbase/vantage/ui";

Placement

Set by PopoverContent’s side (default bottom), align (default center) and sideOffset (default 4).

Matching the trigger’s width

Base UI exposes a --anchor-width CSS variable — the equivalent of Radix’s --radix-popover-trigger-width.

<PopoverContent className="w-(--anchor-width)">…</PopoverContent>