Custom React Accessible Button

A highly customizable and web-accessible button component for React applications.

Installation

You can install the component using npm or yarn:

npm install custom-react-accessible-button

or

yarn add custom-react-accessible-button

Usage

Here's how to import and use the button in your React application:

import React from 'react';
import Button from 'custom-react-accessible-button';

const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <h1>My Awesome App</h1>
      <Button
        label="Click Me!"
        onClick={handleClick}
        backgroundColor="#28a745"
        color="white"
        borderRadius="8px"
      />
      <Button
        label="Disabled Button"
        disabled={true}
        ariaLabel="This button is currently disabled"
      />
    </div>
  );
};

export default App;

Props

You can customize the button with the following props:

| Prop | Type | Default | Description | | ----------------- | -------- | --------------- | --------------------------------------------------------------------------- | | label | string | (required) | The text to display inside the button. | | onClick | func | () => {} | The function to call when the button is clicked. | | backgroundColor | string | '#007bff' | The background color of the button. | | color | string | '#ffffff' | The text color of the button. | | width | string | 'auto' | The width of the button (e.g., '150px', '100%'). | | height | string | 'auto' | The height of the button (e.g., '50px'). | | borderRadius | string | '4px' | The border radius of the button. | | disabled | bool | false | If true, the button will be disabled and visually styled as such. | | ariaLabel | string | '' | Provides an accessible label for screen readers. Defaults to the label. |

Contributing

Contributions are welcome! Please open an issue or submit a pull request on our GitHub repository.

License

This project is licensed under the MIT License.