Filter panel
A common pattern: anchor a filter form to a toolbar button. Use size="lg" for multi-field layouts.
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger>
<Button variant="outline" size="sm">Filters</Button>
</PopoverTrigger>
<PopoverContent size="lg" side="bottom">
<div className="space-y-3">
<h4 className="font-medium">Filters</h4>
<Input placeholder="Search…" />
<div className="flex gap-2">
<Button size="sm">Apply</Button>
<Button size="sm" variant="outline">Reset</Button>
</div>
</div>
</PopoverContent>
</Popover>Small size
Use size="sm" for single-line hints or compact controls like a color swatch picker.
<PopoverContent size="sm">
<p className="text-sm">Compact content</p>
</PopoverContent>