# Tags

* Component: and related tag components
* Path: /components/shared/tag-selector.tsx
* Import:

```typescript
import { TagSelector } from "@/components/shared/tag-selector";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FRJpIR8DkpzhInWuRFEmj%2Fimage.png?alt=media&#x26;token=1833f6c4-5d9b-409c-be93-11ad6fe6de59" alt=""><figcaption><p>Tag Selector</p></figcaption></figure>

A tag system that lets you categorize and filter products. Tags are colored badges that you can click to select/deselect.

### Main Components:

1. **TagSelector:**

* Props:
  * selectedTags: string\[] - Currently selected tag slugs
  * onChange: (tags: string\[]) => void - Called when tags are selected/deselected
* Features:

  * Shows tags as clickable colored badges
  * Switches to dropdown if you have more than 10 tags
  * Shows loading spinner while fetching tags

2. **ProductTags:**
   \
   `import { ProductTags } from "@/components/shared/product-tags";`

Props:

* `tags`: ExtendedProductTag\[] - Tags to display
* `limit?: number` - How many tags to show (default: 3)
* `showAll?: boolean` - Show all tags instead of limiting
* Features:

  * Shows tags on product cards
  * Shows "+X more" if there are hidden tags
  * Clicking tag navigates to tag page

3. **Admin Management:**
   \
   `Path: /dashboard/admin/tags` <br>

* Features:
  * Create tags with custom colors
  * Edit existing tags
  * Assign tags to products
  * Delete tags

Example usage in main-layout.tsx:

```typescript
// For filtering products
const [selectedTags, setSelectedTags] = useState<string[]>([]);
<TagSelector selectedTags={selectedTags} onChange={setSelectedTags} />

// For displaying on a product
<ProductTags tags={product.tags} limit={3} />
```

{% hint style="info" %}
By default, tag search bar will only display when there's more than 10 tags.
{% endhint %}