Ripple Button

Expands a ripple from the exact point you pressed.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/ripple-button.json

Adds components/velora/ripple-button.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`duration` Milliseconds for a ripple to finish expanding	`number`	`600`
`rippleColor` Any 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.

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.

Expands a ripple from the exact point you pressed.

pnpm dlx shadcn@latest add https://paulkeys.org/r/ripple-button.json

Adds components/velora/ripple-button.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`duration` Milliseconds for a ripple to finish expanding	`number`	`600`
`rippleColor` Any 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.

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.