Buttonbuzz NPM

ButtonBuzz a Pre-Styled, Customizable ReactJS Button Library

Introduction

Welcome to ButtonBuzz Library! This library provides a collection of simple and customizable button components built with ReactJS and styled with Tailwind CSS. With this library, you can easily integrate stylish buttons into your React applications, saving you time and effort in development.

Installation

You can install buttonbuzz via npm:

npm install buttonbuzz

Usage

To use the button components provided by this library:

Import the component into your code ('label' is required for all components):

import "buttonbuzz/dist/index.css";
import { ButtonBanner } from "buttonbuzz";

const MyComponent = () => {
  return (
    <div>
      <ButtonBanner
          label= "Subscribe"
        />
    </div>
  );
};

export default MyComponent;

Available Components

Screenshot 2024-03-29 210552

Customization

Property	Description	Components
`labelSize`	Font size of the button's label	All except ButtonCircle
`label`	Button label (required)	All except ButtonCircle
`onClick`	onClick function	All
`labelColor`	Font color of the label	All except ButtonCircle
`labelWeight`	Font label weight	All except ButtonCircle
`onHover`	Background color change on button mouse hover	All except ButtonTextOnly ButtonTextUnderline ButtonPinkPanther
`superClasses`	Additional TailwindCSS classes to add to the button component	All
`borderColor`	Button border color	Button: Block, Boring, BoringInner, BoxMania, BoxManiaDash BrokenBlock, Circle, CircleMania, HalfHalf, HalfRounded, Holo, SeeThrough, Square
`backgroundColor`	Button background color	All except ButtonCircle
`onHoverLabel`	Label color change when user hovers over the button	All
`icon`	String source for the icon in the button	Button: Banner, BlockIcon, BoringShadow, Circle, Delete, HalfHalf, HalfRounded, PinkPanther, TextOnly, TextUnderline
`iconWidth`	Icon width	Button: Banner, BlockIcon, BoringShadow, Circle, Delete, HalfHalf, HalfRounded, PinkPanther, TextOnly, TextUnderline
`iconHeight`	Icon height	Button: Banner, BlockIcon, BoringShadow, Circle, Delete, HalfHalf, HalfRounded, PinkPanther, TextOnly, TextUnderline
`circleRadius`	Radius of circle for circular buttons	Only ButtonCircle
`leftShapeColor`	Color of the left shape of the Geometry Button	Only ButtonGeometry
`rightTopShapeColor`	Color of the top right shape of the Geometry Button	Only ButtonGeometry
`rightBottomShapeColor`	Color of the bottom right shape of the Geometry Button	Only ButtonGeometry
`iconBackground`	Background color for icon	Only ButtonHalfHalf and ButtonHalfRounded
`onHoverIconBackground`	Hover color for icon background	Only ButtonHalfHalf and ButtonHalfRounded
`onHoverLabelBackground`	Hover for label background	Only ButtonHalfHalf and ButtonHalfRounded
`opacity`	Opacity of button	Only ButtonPinkPanther, ButtonTextOnly, ButtonTextUnderline
`onHoverOpacity`	On-hover button opacity	Only ButtonPinkPanther, ButtonTextOnly, ButtonTextUnderline

Contribution

Contributions to ButtonBuzz are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the GitHub repository.