TaxonomyTags

Displays taxonomy terms as styled tags. Uses Tag design system when tagClassName is passed; otherwise uses button variants.

Props

Prop	Type	Required	Default	Description
`taxonomies`	`Taxonomy[]`	No	-	Taxonomies as Taxonomy objects (from Contentstack)
`terms`	`string[]`	No	-	Taxonomies as string array (already extracted term_uids)
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields
`className`	`string`	No	`''`	Additional CSS classes for container
`tagClassName`	`string`	No	-	CSS classes for each tag (e.g. `tagVariants({ variant: 'taxonomyTag' })` from atoms/Tag)
`variant`	`ButtonVariant`	No	`'PrimaryFillButton'`	Button variant to use for tags
`size`	`ButtonSize`	No	`'sm'`	Size variant for tags
`interactive`	`boolean`	No	`false`	Whether tags are clickable (removes cursor-pointer)
`getHref`	`(termUid: string) => string`	No	-	Callback to generate href for each tag when interactive

Usage

1import TaxonomyTags from '@/components/molecules/TaxonomyTags';
2import { tagVariants } from '@/components/atoms/Tag';
3
4// Basic usage (non-interactive spans)
5<TaxonomyTags 
6  terms={['react', 'nextjs', 'typescript']}
7/>
8
9// With different variant
10<TaxonomyTags 
11  terms={terms}
12  variant="SecondaryFillButton"
13  size="default"
14/>
15
16// Taxonomy tag style (design system)
17<TaxonomyTags
18  terms={terms}
19  tagClassName={tagVariants({ variant: 'taxonomyTag' })}
20/>
21
22// Interactive internal links (uses Next.js Link)
23<TaxonomyTags 
24  terms={terms}
25  interactive
26  getHref={(term) => `/tags/${term}`}
27/>
28
29// Interactive external links (uses anchor tag)
30<TaxonomyTags 
31  terms={terms}
32  interactive
33  getHref={(term) => `https://example.com/tags/${term}`}
34/>

import TaxonomyTags from '@/components/molecules/TaxonomyTags';
import { tagVariants } from '@/components/atoms/Tag';

// Basic usage (non-interactive spans)
<TaxonomyTags 
  terms={['react', 'nextjs', 'typescript']}
/>

// With different variant
<TaxonomyTags 
  terms={terms}
  variant="SecondaryFillButton"
  size="default"
/>

// Taxonomy tag style (design system)
<TaxonomyTags
  terms={terms}
  tagClassName={tagVariants({ variant: 'taxonomyTag' })}
/>

// Interactive internal links (uses Next.js Link)
<TaxonomyTags 
  terms={terms}
  interactive
  getHref={(term) => `/tags/${term}`}
/>

// Interactive external links (uses anchor tag)
<TaxonomyTags 
  terms={terms}
  interactive
  getHref={(term) => `https://example.com/tags/${term}`}
/>

Features

Tag or button styling: Uses Tag design system when tagClassName provided; otherwise button variants
Flexible input: Accepts either Taxonomy objects or string arrays
Non-interactive by default: Renders as spans with cursor-default
Smart link handling:
- Internal links (starting with /) use Next.js Link for client-side navigation
- External links use anchor tags with target="_blank" and rel="noopener noreferrer"
Design system: Tag design system (via tagClassName) or button variants and sizes

Link Behavior

Internal links (/tags/react): Renders as Next.js Link component for optimized client-side navigation
External links (https://example.com): Renders as <a> tag with proper security attributes
Non-interactive: Renders as <span> elements

Notes

Returns null if no terms are provided
Term UIDs are formatted for display via formatTaxonomyTermLabel (underscores → spaces)
Uses extractTaxonomyTerms utility to extract terms from Taxonomy objects
When interactive is false, adds cursor-default to override button's cursor-pointer
Default size is 'sm' for tag-like appearance
Overrides padding with py-1 for compact tag styling
Internal links are detected by checking if href starts with /
External links automatically open in new tab with security attributes