Buttons

Departing send button

A 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.

Hover, focus, or press to send the glyph on its way.

Using Departing send button

A 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.

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, label, hoverLabel, lift, flightDistance

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

2525Looping flight send buttonButtonsA card-like send button that lifts off its shadow on hover while its paper plane loops up and away and returns, and squashes flat when clicked.

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.

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.

1632Dot flood buttonButtonsAn outlined pill with a small dot beside its label; hovering grows the dot until it floods the whole button and the label swaps to its inverted twin.

2660Elevation ladder fill buttonButtonsA capsule that climbs three elevation steps between rest, hover and press while a soft-edged accent wash crosses its face.

1858Flying send buttonButtonsA send button whose paper-plane glyph tilts, bobs and flies across the face while the label slides away behind it.