Buttons

Captioned Like Button

An icon-only heart button that reveals a caption rising from beneath on hover or focus, and fills solid with a quick overshoot when liked.

Using Captioned Like Button

An icon-only heart button that reveals a caption rising from beneath on hover or focus, and fills solid with a quick overshoot when liked.

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, caption, likedCaption, size, showCount, startLiked

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

2686Heartbeat like buttonButtonsA round like button whose heart grows on hover with a steady beat; clicking latches it liked and ticks the count beside it.

2472Counting follow chipButtonsAn outlined chip that pairs a label with a follower count, rolling the changed digits up through a masked window when latched and back down when released.

2697Download tooltip buttonButtonsA square icon button whose download arrow nudges downward and takes the accent color while a file-size caption unfolds beneath it.

2413Reversing bars menu buttonButtonsA small square menu tile whose three stacked bars trade widths on hover while the tile itself cross fades from one fill color to another.

2488Travelling knob follow buttonButtonsAn outlined pill whose round knob rolls to the far end on hover, painting an accent track behind it and sliding a follower count into view; clicking keeps the followed state and bumps the count.

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.