Fieldbook
Sign in

Buttons

Dashed outline tooltip button

A dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button.

Using Dashed outline tooltip button

A dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button.

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, tip, accent, dashWidth, gap, placement

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

Diagonal blob flood button
2538Diagonal blob flood buttonButtonsAn outlined button flooded by a large rounded blob that slides in diagonally from off its top corner and darkens while held.
Sketched outline button
2664Sketched outline buttonButtonsAn outlined button whose four corners are deliberately uneven, redrawing into a second lopsided shape with a dashed stroke on hover or focus.
Border trace button
2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.
Center out fill button
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.
Clamp jaws glow button
2598Clamp jaws glow buttonButtonsA hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus.
Color relay sign-in
2603Color relay sign-inButtonsA sign-in pill whose four-segment mark hands its colours off one by one to circular floods that sweep across the button in relay.