Popover

Organism

Anchor-based contextual panel. Closes on outside click and Escape key. Supports top/bottom/left/right placement.

Preview

Code

<Popover trigger={<Button variant="outline">Open</Button>} placement="bottom">
  <div className="p-4">
    <p className="text-sm font-semibold">Title</p>
    <p className="text-xs text-text-secondary">Content goes here.</p>
  </div>
</Popover>

Preview

Code

<Popover placement="top" trigger={<Button>Top</Button>}><div>...</div></Popover>
<Popover placement="right" trigger={<Button>Right</Button>}><div>...</div></Popover>

Popover

Bottom (default)

Placements

Navigation