all-react-buttons

All React Buttons

A collection of customizable button components for React applications. With 11 different button styles, you can easily enhance your user interface with minimal effort.

Features

• 11 Button Styles: Choose from a variety of buttons to fit your design needs.
• Customizable Text: Pass a string as a prop to customize the button label.
• Easy Integration: Simple installation and usage in any React project.
• Accessibility: Designed with accessibility in mind, supporting keyboard navigation and ARIA roles.

Installation

You can install the package via npm or yarn:

npm install all-react-buttons

OR

yarn add all-react-buttons

USAGE

Once installed, you can use the Button component in your React application. The only customization option available is through the text prop, which defines the label displayed on the button.

Basic Example

import React from 'react';
import { BtnOne, BtnTwo, BtnFive } from 'all-react-buttons';

const App = () => {
  return (
    <div>
      <BtnOne text="Click Me" />
      <BtnTwo text="Hover ME" />
      <BtnFive text="My BUTTON" />
    </div>
  );
};

export default App;

Customization

While the Button component does not accept other props for customization (like style, className, or onClick), you can modify the button's appearance using CSS.

For example, you can apply custom styles using a CSS class:

/* styles.css */
.my-button {
  background-color: #4CAF50; /* Green */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}