Buttons

Letter cascade button

A wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above.

Using Letter cascade button

A wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above.

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: label, accent, stagger, tracking, sink

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

2681Split flap face buttonButtonsThe filled face drops out of the bottom of the button on hover and the label rebuilds itself letter by letter from behind it.

2517Letter drop press buttonButtonsA key-cap button on a darker ledge whose label drops away on hover and is rebuilt letter by letter from above, pressing down onto the ledge when clicked.

2718Letter swap copy buttonButtonsA raised copy button whose label rebuilds itself letter by letter on hover while its icon chip pulses and draws a check when the copy lands.

2435Split curtain reveal buttonButtonsA button hidden under four accent panels that part sideways first and vertically a beat later, uncovering the label in two staged moves.

2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.