Fieldbook
Sign in

Buttons

Letter swap copy button

A 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.

Using Letter swap copy button

A 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.

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, doneLabel, accent, stagger, resetMs

Which frameworks are available?

The catalog lists these versions: react. 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

Copy flick tile
2590Copy flick tileButtonsA square tile holding a stack of two pages; a long press flicks the top page away, confirms the copy in the caption, then resets the stack.
Letter cascade button
1712Letter cascade buttonButtonsA wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above.
Letter drop press button
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.
Split flap face button
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.
Add Then Confirm Chip
2466Add Then Confirm ChipButtonsA dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added.
Check stroke submit
2594Check stroke submitButtonsA compact filled submit button whose leading checkmark draws itself stroke by stroke when the action succeeds.