Fieldbook
Sign in

Overlays

Anchored popover card

A trigger button that opens a small settings card anchored to itself, scaling in from the edge it grows out of and closing on a second click, Escape, or a press outside.

Using Anchored popover card

A trigger button that opens a small settings card anchored to itself, scaling in from the edge it grows out of and closing on a second click, Escape, or a press outside.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: anchor, gap, accent, triggerLabel

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Anchored info popover
1911Anchored info popoverOverlaysA trigger button that opens a small floating info panel anchored to one of its edges, fading and scaling in from that edge and dismissing on outside click or Escape.
Anchored settings popover
1913Anchored settings popoverOverlaysA button that opens a small settings panel anchored beside it, growing from the corner nearest its trigger and flipping sides when space runs out.
Grouped filter popover
2161Grouped filter popoverOverlaysA row of small filter buttons where opening one button's panel automatically closes any other panel already open in the same row, each panel growing from whichever edge it was triggered from.
Pop scale panel
2207Pop scale panelOverlaysA popover that springs open from half size, points a small arrow back at its trigger, dims the page behind it and closes on Escape or an outside click.
Anchored detail popover
1910Anchored detail popoverOverlaysA trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click.
App folder expand
2300App folder expandOverlaysA home screen style folder tile whose small app icons grow into a full panel, each icon traveling from its miniature to its large spot.