Buttons

Sliding Pin Swap

A ramped button whose pin glyph glides from one side to the other while the resting word fades out and a reply fades in behind it.

Using Sliding Pin Swap

A ramped button whose pin glyph glides from one side to the other while the resting word fades out and a reply fades in behind it.

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: accent, idleLabel, hoverLabel, travel, duration

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

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

2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.

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.

2583Capsule in frame buttonButtonsA bordered outer tray holding a floating inner capsule that sinks into the frame for the length of a press.

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.

2563Departing send buttonButtonsA send button that flies its glyph off the right edge and empties its label on hover, revealing a second line over a spreading accent wash.