Buttons

Wash swap pill

A tall black pill whose fill dissolves on hover to reveal a soft tinted wash underneath while the label flips from light to dark.

Using Wash swap pill

A tall black pill whose fill dissolves on hover to reveal a soft tinted wash underneath while the label flips from light to dark.

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, height, duration, angle

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

2485Rocking icon CTAButtonsA solid accent pill whose leading calendar icon rocks like a metronome on hover and, when clicked, draws a tick and swaps the wording to a confirmed label before settling back.

2567Squaring backer buttonButtonsA solid pill with a tilted twin behind it that snaps level and lit on hover while an arrow unfolds from the left beside the label.

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

1664Wipe fill buttonButtonsA pill button whose coin sized disc grows to cover the whole shape on hover, wiping the accent fill out from under a label that never moves.

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