Buttons

Scroll cue pill

A tall capsule holding a long thin arrow that drifts on a loop, grows under the pointer and collapses once used.

Click a pill once you have read this far

Using Scroll cue pill

A tall capsule holding a long thin arrow that drifts on a loop, grows under the pointer and collapses once used.

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: accent, direction, height, driftDistance, loop

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

2506Scroll cue buttonButtonsA small scroll affordance whose chevron falls through its clipped window on hover or focus in an endless loop, and whose click glides the nearest scrollable area toward the next section.

2555Scroll hint buttonButtonsA narrow upright capsule with a bead that slides down inside it on a loop, captioned below, that scrolls the nearest scrollable area one screen when pressed.

2549Wheel hint scroll buttonButtonsA small mouse outline with a bobbing wheel bar that scrolls the next screenful into view on click and fades out when nothing is left to scroll.

2530Nudge arrow invert buttonButtonsA dark uppercase pill with an arrow pinned to its right edge; hovering inverts it to a pale surface and nudges the arrow forward, and pressing flashes a warm fill.

2640Arrow chip buttonButtonsA rounded action button with a glowing arrow chip docked in its right end that lifts off the page on hover with a hard offset shadow and sinks on press.

2601Arrow relay badge pillButtonsA pill button with a round left badge whose arrow exits through the top corner on hover while a fresh one arrives from below and the body eases to near-black.