Buttons

Arrow to label pill

A round chevron button that stretches into a wide labeled pill on hover, trading the mark for a word as the flat fill becomes a two-stop ramp.

Hover the circle, or tab to it, and it opens into a pill.

Using Arrow to label pill

A round chevron button that stretches into a wide labeled pill on hover, trading the mark for a word as the flat fill becomes a two-stop ramp.

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, partner, label, expandedWidth, 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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2714Expanding icon pillButtonsA round icon button that stretches into a labelled pill on hover, trading its glyph for a word as an accent fill arrives.

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.

2523Label swap slide buttonButtonsA bordered pill that swaps its whole contents on hover: the resting row slides up and out while a second row with its own icon and colour slides in from below.

1834Layer swap buttonButtonsTwo rounded layers anchored to a corner trade sizes on hover, the resting fill collapsing into a seed while the seed grows to fill the button.

2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.

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.