Skip to content
Pinky UI

Ripple Button

A button that answers where it was pressed.

  • buttons
  • elastic
  • liquid
  • button
  • press
  • ripple
  • feedback

local pressure · bounded response

Quick usage

usage
import { RippleButton } from "@pinky-ui/components";

<RippleButton variant="primary">
  Save changes
</RippleButton>

Presets

Subtle

Compression only, faint ripple.

pressScale={0.98} rippleColor={"rgba(255,255,255,0.3)"}

Soft

The default.

pressScale={0.96}

Playful

Deeper compression.

pressScale={0.93}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
variant"primary" | "soft" | "ghost""primary"Visual weight, shared with Magnetic Button.
size"sm" | "md" | "lg""md"Control height and padding.
pressScalenumber0.96Scale at full press.
rippleColorstringrgba(255,255,255,0.5)Colour of the expanding surface.

Accessibility

  • A real <button> with every native attribute forwarded.
  • Keyboard activation produces the same compression and a centred ripple, so Space and a click feel alike.
  • Ripples are aria-hidden and cannot intercept clicks.
  • Disabled buttons produce no ripple and no press response.

Reduced motion

With prefers-reduced-motion: reduce, there is no compression and no ripple — only the standard hover and focus styling.

When to use

  • Form submits and primary actions
  • Dense toolbars where magnetism would fight neighbouring buttons
  • Touch-first interfaces, where press feedback matters most

When not to use

  • Isolated hero CTAs — Magnetic Button suits those better
  • Anywhere a Material-style ripple would clash with the surrounding design