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.