ripple-effect-button
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Ripple Effect Button

A simple React, TypeScript, and Tailwind CSS ripple effect button component.

Installation

npm install ripple-effect-button

Usage

import { Button, ButtonProps } from "ripple-effect-button";

const MyComponent: React.FC = () => {
  const buttonProps: ButtonProps = {
    variant: "primary",
    size: "large",
    // other props...
  };

  return <Button {...buttonProps}>Click me</Button>;
};

Props

  • variant (optional): Specifies the button variant (e.g., 'primary', 'outlined', 'secondary').
  • size (optional): Specifies the button size (e.g., 'small', 'default', 'large').
  • loading (optional): Enables a loading state for the button.
  • loadingIconSize (optional): Specifies the size of the loading spinner. Default is 16px.

Examples

  • Basic Usage
import { Button } from "ripple-effect-button";

const MyComponent: React.FC = () => {
  return <Button>Click me</Button>;
};
  • Loading State
import { Button } from "ripple-effect-button";

const MyComponent: React.FC = () => {
  return (
    <Button loading loadingIconSize="20px" disabled>
      Loading...
    </Button>
  );
};

Author

License

This project is licensed under the MIT License.

Acknowledgments

Inspired by the need for a simple and customizable ripple effect button.

Package Sidebar

Install

npm i ripple-effect-button

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

72.5 kB

Total Files

6

Last publish

Collaborators

  • bilchalan