Overlays

Popover

Content that floats next to its trigger: filters, a small form, details.

import { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverAnchor } from "@flinbu/seed";

Filters

import { Button, Popover, PopoverClose, PopoverContent, PopoverTrigger, Switch } from "@flinbu/seed";
import { SlidersHorizontal } from "lucide-react";

<Popover>
  <PopoverTrigger asChild><Button variant="secondary" leftIcon={<SlidersHorizontal />}>Filters</Button></PopoverTrigger>
  <PopoverContent aria-label="Filters" className="flex flex-col gap-base">
    <p className="m-0 label-label-2-semibold text-primary">Show tokens</p>
    <Switch label="With a Dark value" defaultChecked />
    <Switch label="Used by components" />
    <div className="flex justify-end"><PopoverClose asChild><Button size="sm">Done</Button></PopoverClose></div>
  </PopoverContent>
</Popover>

Use it for

Settings and filters that apply to what's on the page.

Use something else for

Commands: use DropdownMenu.
A name for an icon button: use Tooltip.

Props

Prop	Type	Default	Description
`PopoverContent: side / align`	`Side / 'start''center''end'`	`'bottom' / 'start'`	Placement; flips to stay on screen.
`PopoverContent: inline`	`boolean`	–	Render in place instead of a portal.
`className`	`string`	–	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

Built on Radix Popover: role dialog, Escape and outside clicks close it, focus returns to the trigger.
Give it an aria-label or a heading.