material-ripple-button v2.0.3

material-ripple-button

React Ripple Button

Description

React Ripple Button is similar to Material Design Button and may be used in standalone React applications or in conjunction with a CSS framework such as TailwindCSS.

Installation

pnpm add material-ripple-button

or

yarn add material-ripple-button

or

npm install material-ripple-button

Usage

import RippleButton from 'material-ripple-button';

const MyComponent = () => {
    return <>
        {/* ... */}
        <RippleButton>This is a ripple button</RippleButton>
    </>
}

Properties

Note: Disable ripple and turn it into normal button by adding attribute data-noripple

You can use any attribute, these will be completely passed directly into the <button> tag

Example

import RippleButton from "material-ripple-button";

export default function Home() {
	return (
		<>
			{/* Other code */}
			<RippleButton className="mt-5 p-2 text-red-500">Hello</RippleButton>
		</>
	);
}

On Focus

When the button is focused, the ripple effect also appears but has a different behavior, and either disappears after a few seconds or disappears immediately when it is pressed/touched (mousedown/touchstart).

Ripple Color

The color of ripple is based on the color of the button's attribute in the order of precedence as follows: