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

| Propery | Supported | | -------------------------------------------------------------------------------------- | --------- | | Default attributes | YES |

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:

|Order | Attribute | Color Level (r+g+b) | Behavior | |:------| :-----------: | :-----------: | ----------:| |1 | background-color | > 385.5 | darker | || background-color | <= 385.5 | lighter | |2| border-color | > 385.5 | lighter | || border-color | <= 385.5 | darker | |3| color | > 385.5 | lighter | || color | <= 385.5 | darker | |4| default | | lighter of rgb(33, 150, 243) |