Button Component

A customizable React button component.

Installation

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

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

or

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

`Props`

The Button component accepts the following properties:

| Prop | Type | Description | |---------------|--------------|-----------------------------------------------------------------------------------------------------------------| | dataTestId |string | The data-testidattribute 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`

`jsx 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 ( dataTestId="custom-button" disabled={false} title="Click Me" variant="primary" size="md" iconRight="arrow_forward" fullWidth={false} type="button" onClick={handleButtonClick} /> ); };

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.

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

jsx
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 (
    
              dataTestId="custom-button"
        disabled={false}
        title="Click Me"
        variant="primary"
        size="md"
        iconRight="arrow_forward"
        fullWidth={false}
        type="button"
        onClick={handleButtonClick}
      />
    
  );
};

export default ExampleComponent;