Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Sliding send button

Sliding send button: A flat send button that slides right on hover while the gap between its label and arrow opens, recoils a few pixels under press, and settles back on leave.

Using Sliding send button

Sliding send button uses the inline preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
labeltextSendUp to 20 characters
accentcolor#38BDF8No additional limit in the metadata.
travelnumber12From 0 to 24; step 1
trackingnumber1From 0 to 3; step 0.1
Which frameworks are available for Sliding send button?

Sliding send button is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Sliding send button depend on?

The React metadata lists these npm dependencies beyond React: motion.

What accessibility details are visible in Sliding send button?

The React source for Sliding send button includes: attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Sliding send button handle reduced motion?

Sliding send button reads the motion preference in its React source through useReducedMotion(). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Gap stretch arrow button component, a Fieldbook UI component in Buttons.
2585Gap stretch arrow buttonButtonsA fixed width pill whose trailing arrow walks to the far edge on hover, stretching the gap after a stationary label, with a faint trail copy following a beat behind.
Still of the Arrow wipe call to action component, a Fieldbook UI component in Buttons.
1629Arrow wipe call to actionButtonsA call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked.
Still of the Breathing Inset Button component, a Fieldbook UI component in Buttons.
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.
Still of the Overshoot icon button component, a Fieldbook UI component in Buttons.
2580Overshoot icon buttonButtonsA pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus.
Still of the Slide under download button component, a Fieldbook UI component in Buttons.
2513Slide under download buttonButtonsA labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray.
Still of the Sliding fill send pill component, a Fieldbook UI component in Buttons.
2564Sliding fill send pillButtonsA wide outlined pill with a solid disc at one end; hovering slides that fill across the whole pill and flips the label as it passes.