Buttons

Gradient swap button

A rounded button whose diagonal shading trades its two stops on hover, so the light corner travels across the face.

Using Gradient swap button

A rounded button whose diagonal shading trades its two stops on hover, so the light corner travels across the face.

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, angle, radius

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

2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.

2635Rim to fill gradient buttonButtonsA dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down.

2578Swelling pill buttonButtonsA one-hue gradient pill that swells larger on hover while a tinted shadow spreads beneath it, and compresses briefly when pressed.

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

1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.

2711Count Sweep CTAButtonsA compact dark call to action with a leading mark, a divider and a live tally, crossed by a slow diagonal light streak on hover.