@bolttech/atoms-chip

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.