Buttons

Liquid wave button

A dark pill half full of colored liquid whose surface rolls in a continuous, never-repeating wave.

Using Liquid wave button

A dark pill half full of colored liquid whose surface rolls in a continuous, never-repeating wave.

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, liquid, level, waveSeconds, paused

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

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.

2595Detached Ring PillButtonsA dark pill orbited by a floating outline ring that pushes further out and floods the pill with color on hover.

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

2631Leap and tint buttonButtonsA pale pill that leaps upward on hover or focus while its fill turns to the accent and its neutral shadow blooms into a large tinted pool in the same hue.

2511Letter spread drop buttonButtonsA pale pill whose letters push apart as it fills with an accent colour and a soft pool blooms below it, then drops onto that pool while held.

1713Lift and fill pillButtonsAn outlined pill that jumps a fixed distance straight up and fills solid with its accent while pointed at, then drops back on the same curve.