Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Slide under download button

Slide under download button: A 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.

Using Slide under download button

Slide under download 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
labeltextDocsUp to 20 characters
accentcolor#9BE15DNo additional limit in the metadata.
directionselectbelowOptions: below, above
durationnumber0.5From 0.15 to 1.2; step 0.05
bobbingbooleantrueNo additional limit in the metadata.
Which frameworks are available for Slide under download button?

Slide under download 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 Slide under download button depend on?

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

What accessibility details are visible in Slide under download button?

The React source for Slide under download button includes: attributes and handlers (aria-hidden, onKeyDown, onKeyUp); key comparisons (Enter, Space). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Slide under download button handle reduced motion?

Slide under download button reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduce ? { y: "0%", opacity: revealed ? 1 : 0 } : { y: revealed ? (below ? "100%" : "-100%") : "0%", opacity: 1 }. 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 Icon reveal chip component, a Fieldbook UI component in Buttons.
2476Icon reveal chipButtonsA small outlined chip that floods with its accent on hover while the label slides left and a hidden glyph fades in from the right.
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 Shrinking cap icon row component, a Fieldbook UI component in Buttons.
2037Shrinking cap icon rowButtonsA row of round icon buttons whose fill hides behind a dark cap that collapses away on hover, uncovering the colour from the rim inward.
Still of the Slide out tabs button component, a Fieldbook UI component in Buttons.
2040Slide out tabs buttonButtonsA download button with two dark caption tabs stacked behind it that slide out above and below on hover and pull halfway back when it is held.
Still of the Expanding icon pill component, a Fieldbook UI component in Buttons.
2714Expanding icon pillButtonsA round icon button that stretches into a labelled pill on hover, trading its glyph for a word as an accent fill arrives.
Still of the Flip face button component, a Fieldbook UI component in Buttons.
1633Flip face buttonButtonsA button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves.