Fieldbook
Sign in

Overlays

Anchored detail popover

A 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.

Using Anchored detail popover

A 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.

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: side, align, offset, width, accent

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

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.
Edge aware popover
2145Edge aware popoverOverlaysA popover that springs out of its trigger and flips or shifts to the opposite side when the side you asked for would run past the frame edge, staying glued as things scroll.
Edge-slide panel
2146Edge-slide panelOverlaysA settings panel that springs in flush against a screen edge while the page behind it dims and blurs.
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 popover card
1912Anchored popover cardOverlaysA 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.
Centered modal frame
2119Centered modal frameOverlaysA plain centered modal that fades and scales in over a dimmed backdrop, with a header, body and footer, for everyday forms and confirmations.