Buttons

Expanding icon pill

A round icon button that grows into a labelled pill on hover or focus, turning its glyph a full revolution as the label slides in.

Using Expanding icon pill

A round icon button that grows into a labelled pill on hover or focus, turning its glyph a full revolution as the label slides in.

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: label, accent, collapsed, expanded, spin

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

2469Arrow to label pillButtonsA 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.

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.

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.

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.

1895Swallowing Chip ButtonButtonsA pill button with a small light chip pinned at its right edge that widens on hover until it covers the whole 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.