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.