@acctglobal/product-tags

What does this component do?

This agnostic component is a Category tag inserted into the product page. When clicked, this tag redirects the user to the product category page.

If the product is part of a specific collection, you can also enable a collection tag that will appear next to the category tag.

---

Download the package

using

• npm i @acctglobal/product-tags

or

• yarn add @acctglobal/product-tags

  ---

Usage examples

Import the component in your file:

• import {ProductTags} from '@acctglobal/product-tags

Declare the component and pass your LinkComponent inside of the CustomTagComponent prop.

• <ProductTags
    tagCategoryLabel="Category"
    urlCategory="/category"
    tagCollectionLabel="Collection"
    urlCollection="/collection"
    CustomTagComponent={Link}
  />
  

CSS example

• [data-tags-container] {
    display: flex;
    gap: 12px;
  }
  
  [data-tag-category] {
      background-color: #94E7AD;
      border: 2px solid #40AA60;
      border-radius: 50px;
      padding: 4px 11px 4px 10px;
      text-decoration: none;
      color: #2A7641;
      font-weight: 700;
  }
  
  [data-tag-collection] {
      background-color: #FF8E8E;
      border: 2px solid #FF5050;
      border-radius: 50px;
      padding: 4px 11px 4px 10px;
      text-decoration: none;
      color: black;
      font-weight: 700;
  }
  

Result

---

Props

---

Prop	Value	Description
tagCategoryLabel	string	Mandatory. Set the title of the tag
urlCategory	string	Mandatory. Set the url to your category page
tagCollectionLabel	string	Optional. Set the title of the tag
urlCollection	string	Optional. Set the url to your collection page
tagStyles	React.CSSProperties	Optional. Set the tag styles
CustomTagComponent	ComponentType< ButtonTag >	Mandatory. Set the Link component for the tags

---

ButtonTag

Prop	Value	Description
to	string	Mandatory. Set the url
style	CSSProperties	Optional. Pass styles as props
children	ReactNode	Optional. It represents anything that can be set as children of a ReactElement

---

### CSS identifiers

Identifier	Description
data-tags-container	styles the container that wraps the component.
data-tag-category	styles the category tag of the component.
data-tag-collection	styles the collection tag of the the component.