Ripple Button
Expands a ripple from the exact point you pressed.
- 1.2 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/ripple-button.jsonAdds components/velora/ripple-button.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
durationMilliseconds for a ripple to finish expanding | number | 600 |
rippleColorAny CSS colour; defaults to a translucent version of the text colour | string | "currentColor" |
children* | React.ReactNode | — |
Also accepts every <button> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- No ripple is created on click; the button keeps its hover background change only.
- Keyboard
- A native <button>: Enter or Space activate it, with a visible focus-visible outline. Keyboard activation ripples from the centre.
- Screen readers
- Announced as a button named by its text; the ripple layer is aria-hidden.