Buttons

Ripple tap button

A solid button that sends a circle outward from the exact point you pressed, clipped to its rounded shape.

Using Ripple tap button

A solid button that sends a circle outward from the exact point you pressed, clipped to its rounded shape.

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, rippleSeconds, pressScale, size

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

1645Press ripple buttonButtonsA solid button that spawns a circle of light at the exact point you press, expanding past the edges and fading as you release.

1643Pointer Ripple ButtonButtonsA button that plants a circle of light exactly where it was pressed and expands it out past the edges as it fades.

1524Pulse buttonButtonsA button that answers a click with a single expanding ring from the pointer position and a short press-down, then settles.

1655Stacked ripple buttonButtonsAn outlined button that keeps every ripple alive at once, so quick repeated taps overlap into layered rings.

2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.