Buttons

Expanding icon pill

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

Using Expanding icon pill

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

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, cast

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.

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.

2580Overshoot icon buttonButtonsA pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus.

2521Ring halo pill buttonButtonsA pill button that keeps a clear gap around its colored core, fills that gap with a lightened accent ring on hover or keyboard focus, and squeezes inward while pressed.