crispmeasured from Attio

Popover

A generic anchored surface — the Menu / Select popover holding arbitrary content.

The measured popover surface (radius 12, layered soft shadow, inset border) holding arbitrary content rather than menu items — the base a lot of Attio's inline editors are built on. Opens below its trigger (flips up when there's no room), closes on outside pointer-down and Escape. Controlled or self-managed.

Preview

Usage

import { Popover } from "crisp";

<Popover trigger={<button>Open</button>} aria-label="Filter">
  <div style={{ padding: 8 }}>Any content here.</div>
</Popover>;

API

PropTypeDefaultDescription
triggerReactElementElement that toggles the popover (gets aria + click).
childrenReactNodePopover body.
align"start" | "end""start"Align to the trigger's left or right edge.
openbooleanControlled open state (omit to self-manage).
onOpenChange(open: boolean) => voidOpen-state callback.

On this page