0.15.0 • Published 1 month ago
@bolttech/atoms-chip v0.15.0
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.
0.15.0
1 month ago
0.14.0
4 months ago
0.10.0
8 months ago
0.0.1
10 months ago
0.3.0
10 months ago
0.2.0
10 months ago
0.1.1
10 months ago
0.11.0
6 months ago
0.9.0
9 months ago
0.12.0
6 months ago
0.8.0
9 months ago
0.13.0
6 months ago
0.12.1
6 months ago
0.5.0
10 months ago
0.4.0
10 months ago
0.7.0
9 months ago
0.6.0
10 months ago
0.1.0
11 months ago