display contract

Popover

Click-triggered floating panel for richer content than a tooltip.

Variants

  • default
  • menu
  • form

Sizes

  • sm
  • md
  • lg

Slots

  • header
  • content
  • footer

Example

<Popover><PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger><PopoverContent>...</PopoverContent></Popover>

Usage rule

Close on outside click, Escape, and any keyboard navigation that leaves the panel.

The full Popover contract has 4 more rules, plus the do-not patterns. Get the full recipe.

Get the Popover contract in your project.