Button Component

A customizable React button component.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-button

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-button

Props

The Button component accepts the following properties:

| Prop | Type | Description | |---------------|--------------|-----------------------------------------------------------------------------------------------------------------| | dataTestId | string | The data-testid attribute for testing. | | disabled | boolean | Disables the button when set to true. | | title | string | The text content of the button. | | variant | string | The variant style of the button (e.g., 'primary', 'secondary', 'alternative'). | | size | string | The size of the button (e.g., 'sm', 'md', 'lg'). | | iconRight | string | The name of the icon to be displayed on the right side of the button. | | iconLeft | string | The name of the icon to be displayed on the left side of the button. | | fullWidth | boolean | Sets the button width to 100% if true. | | type | string | The type of the button (e.g., 'button', 'submit', 'reset'). | | onClick | function | Callback function to handle the button click event. |

Usage

import React from 'react';
import {Button} from '@bolttech/atoms-button';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    // Logic to handle the button click event
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Button
        dataTestId="custom-button"
        disabled={false}
        title="Click Me"
        variant="primary"
        size="md"
        iconRight="arrow_forward"
        fullWidth={false}
        type="button"
        onClick={handleButtonClick}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.