Buttons

Invert and grow button

A bordered block that swaps its ink and paper colors and grows from its center while hovered, then snaps flat under the press.

Using Invert and grow button

A bordered block that swaps its ink and paper colors and grows from its center while hovered, then snaps flat under the press.

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, growth, borderWidth

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

2528Invert on hover pillButtonsA filled pill that trades fill and label colors and swells slightly on hover or keyboard focus, squeezing below its resting size while pressed.

1742Rotating face plateButtonsA button whose labelled dark plate turns a corner and grows when engaged, exposing the accent slab underneath as four triangles, then shrinks and swaps colors with it while pressed.

2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.

1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.

2542Comb wipe invert buttonButtonsTwo interlocking striped combs slide in from above and below to cover a black pill, inverting the label as they pass.

2684Converging chevron buttonButtonsTwo arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label.