Tag Component

The Tag component is a simple and customizable React component designed to display labels or short text snippets with various styling options.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Tag component in your React application, follow these steps:

Installation

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

or

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

Once you have the required dependencies installed, you can start using the Tag component in your React application.

Usage

The Tag component provides a flexible and customizable way to display labels or short text snippets with various styling options.

To use the component, import it and include it in your JSX:

import React from 'react';
import {Tag} from '@bolttech/atoms-tag';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your Tag component here

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tag label="New" variant="primary" fontWeight="caption" dataTestId="tag-new" />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Tag component accepts the following props:

| Prop | Type | Description | | ------------ | ------ | ------------------------------------------------------------------------ | | label | string | The text content of the tag. | | variant | string | The color variant of the tag (e.g., 'primary', 'secondary'). | | fontWeight | string | The typography variant for informational text (e.g., 'default', 'bold'). | | dataTestId | string | The data-testid attribute for testing purposes. |

Example

Here's an example of using the Tag component:

<Tag label="New" variant="primary" fontWeight="caption" dataTestId="tag-new" />

This will render a tag with the label "New" in the primary color variant and using the caption typography variant.

Contributing

Contributions to the Tag component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.