Buttons

Blob cap button

A capsule button with a single-hue liquid blob that swells from a resting corner mark to fill the shape on hover.

Using Blob cap button

A capsule button with a single-hue liquid blob that swells from a resting corner mark to fill the shape on hover.

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, spread, blur, growth

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

2623Fusing blob fill buttonButtonsA thick outlined button that fills on hover as liquid blobs rise from below and fuse into one wobbling surface.

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.

2588Draining fill buttonButtonsAn outlined pill that starts fully flooded with colour and drains down to a slim band at the foot on hover, then refills from the bottom on leave.

2660Elevation ladder fill buttonButtonsA capsule that climbs three elevation steps between rest, hover and press while a soft-edged accent wash crosses its face.

2720Nested capsule buttonButtonsA pill button built from three nested capsules that flatten into the outer ring on hover while the label crossfades to the accent colour.

2530Nudge arrow invert buttonButtonsA dark uppercase pill with an arrow pinned to its right edge; hovering inverts it to a pale surface and nudges the arrow forward, and pressing flashes a warm fill.