Buttons

Stacked ripple button

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

Using Stacked ripple button

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

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, rippleColor, spread, rippleSeconds, maxRipples

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2392Offset outline stackButtonsA bordered button face resting on stepped outline layers like a small pad of paper; hover slides the top sheet onto the stack and inverts its fill.

2626Diagonal orb fill buttonButtonsOne oversized circle slides corner to corner across an outlined button, filling it on the diagonal, and darkens the instant you press.

1864Hard Shadow ButtonButtonsA thick-outlined button that lifts off its solid offset shadow on hover and presses back into it on click.

2371Inset Edge PillButtonsA pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover.

2587Keycap plate buttonButtonsA square plate framing a rounded key that travels down on a press and stays depressed while the button is held, by pointer or keyboard.

2482Offset shadow press buttonButtonsA flat outlined button that sits on a hard offset shadow and slides down into it when pressed, like a real key bottoming out.