Buttons

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

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.

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, caption, tilt, sweep

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

2450Tilting Backer TileButtonsA square translucent tile with a solid colored plate sitting exactly behind it that tilts out from under the face on hover.

1679Crossing ripple tileButtonsA square badge tile where two dots race in from opposite edges, swell into overlapping circles that flood the face, and unroll a caption underneath.

1741Rising Fill BadgeButtonsA square tile whose round badge shrinks and climbs while a large circle wipes upward from below and a caption rises into the space it leaves.

2573Split shutter reveal buttonButtonsA round button whose two label halves retract to the edges at different speeds, uncovering the breathing mark underneath as the whole thing tilts.

1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.

2553Collapsing share buttonButtonsA labelled pill that shrinks to a round glyph while a strip of link tiles floats into the space it left.