Buttons

Growing Pill Backdrop

A bare label with a tinted disc tucked behind its first letters that grows into a full pill on hover while the arrow slides into place.

Using Growing Pill Backdrop

A bare label with a tinted disc tucked behind its first letters that grows into a full pill on hover while the arrow slides into place.

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, label, showArrow, discSize, duration

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

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

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.

2319Circled Arrow PillButtonsA solid high-chroma pill with the label on the left and a ringed arrow on the right that nudges forward on hover.

2339Download tray pulse buttonButtonsA rounded action pill with a small tray mark on its leading edge, where an arrowhead drops through the tray on a loop while the pointer rests on it.

2350Expanding chip back buttonButtonsA pale pill button whose accent chip stretches across the full width on hover, carrying its arrow to the far side while the label stays put and gets covered.

2585Gap stretch arrow buttonButtonsA fixed width pill whose trailing arrow walks to the far edge on hover, stretching the gap after a stationary label, with a faint trail copy following a beat behind.