Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Twin Sweep Tile

Twin Sweep Tile: A square outlined tile that tilts as it lifts, runs two slanted light bands across itself in opposite directions and trades its glyph for a caption.

Using Twin Sweep Tile

Twin Sweep Tile 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
accentcolor#3DDC97No additional limit in the metadata.
labeltextPowered byUp to 24 characters
captiontextBeacon TwoUp to 24 characters
tiltnumber1From 0 to 4; step 0.5
sweepbooleantrueNo additional limit in the metadata.
Which frameworks are available for Twin Sweep Tile?

Twin Sweep Tile 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 Twin Sweep Tile depend on?

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

What accessibility details are visible in Twin Sweep Tile?

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

How does Twin Sweep Tile handle reduced motion?

Twin Sweep Tile 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 Collapsing share button component, a Fieldbook UI component in Buttons.
2553Collapsing share buttonButtonsA labelled pill that shrinks to a round glyph while a strip of link tiles floats into the space it left.
Still of the Channel tile row component, a Fieldbook UI component in Buttons.
2313Channel tile rowButtonsA wrapping row of square icon tiles under a small caption, where each tile crossfades to its own reserved colour on hover.
Still of the Destructive sweep button component, a Fieldbook UI component in Buttons.
2696Destructive sweep buttonButtonsA delete action whose rose to crimson shading sweeps end to end on hover, tipping the bin lid, with an optional hold to confirm line along the bottom edge.
Still of the Diagonal wedge button component, a Fieldbook UI component in Buttons.
2676Diagonal wedge buttonButtonsA squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face.
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.
Still of the Hinged progress button component, a Fieldbook UI component in Buttons.
2688Hinged progress buttonButtonsA button whose face hinges backward on hover, exposing a tray where a progress bar fills in uneven bursts and fades out at full width.