@bolttech/atoms-button NPM

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

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;