Fieldbook
Sign in

Buttons

Scribble Edit Chip

An edit chip whose pencil skates a short scribble back and forth on hover while a wobbly underline draws itself beneath the label, and clicking pins it as the active edit target.

Using Scribble Edit Chip

An edit chip whose pencil skates a short scribble back and forth on hover while a wobbly underline draws itself beneath the label, and clicking pins it as the active edit target.

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, scribbleSeconds, underline

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

Brightening gradient button
1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.
Corner flood button
1678Corner flood buttonButtonsA dark rectangular button with a small colour chip parked half off its top left corner that swells until it floods the whole face when the button is engaged.
Emboss swap button
1955Emboss swap buttonButtonsA small saturated chip that trades its flat cast shadow for a four way moulded relief on hover, so the surface appears to be pressed out of the page.
Expanding chip back button
2350Expanding chip back buttonButtonsA pale pill button whose accent chip stretches across the full width on hover, carrying its arrow to the far side while the label stays put and gets covered.
Meshing gears chip
2387Meshing gears chipButtonsA settings chip with two interlocked cogs that turn in opposite directions whenever the pointer is on it, at speeds set by their tooth counts.
Underline flood button
1663Underline flood buttonButtonsA button with a hairline accent band on its bottom edge that widens and then climbs into a full flood on hover or focus, the label switching colour only once the fill has landed.