Chip Component

A versatile React chip component for displaying tags or small interactive elements.

Installation

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

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

or

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

Props

The Chip component accepts the following properties:

| Prop | Type | Description | | ----------- | ---------- | ---------------------------------------------------------------------- | | textChip | string | The text content of the chip. | | iconLeft | string | The name of the icon to be displayed on the left side of the chip. | | iconRight | string | The name of the icon to be displayed on the right side of the chip. | | sizeVariant | string | The size variant of the chip (e.g., 'small', 'medium', 'large'). | | fullWidth | boolean | Boolean representing if the Chip is full width. | | disabled | boolean | Disables the chip interaction when set to true. | | selected | boolean | Determines whether the chip is selected or not. | | onClick | function | Callback function to handle the chip click event. | | dataTestId | string | The data-testid attribute for testing. |

Usage

import React, { useState } from 'react';
import { Chip } from '@bolttech/atoms-checkbox';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [isChipSelected, setIsChipSelected] = useState(false);

  const handleChipClick = (isSelected) => {
    setIsChipSelected(isSelected);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Chip textChip="Tag Example" iconLeft="local_offer" sizeVariant="small" disabled={false} selected={isChipSelected} onClick={handleChipClick} dataTestId="custom-chip" fullWidth={true} />
    </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.