@bolttech/atoms-button

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.