Tag

Design system utility for taxonomy/filter tag styling. Exports tagVariants for consistent pill-style tags across content taxonomies, list filters, and search chips.

Exported Utilities

`tagVariants`

Function to generate tag class names without rendering:

1import { tagVariants } from '@/components/atoms/Tag';
2
3// Interactive (clickable) tag
4const linkClassName = tagVariants({ variant: 'taxonomyTag', interactive: true });
5
6// Non-interactive (display only) tag
7const spanClassName = tagVariants({ variant: 'taxonomyTag', interactive: false });
8
9// With additional classes
10const className = tagVariants({ variant: 'taxonomyTag', className: 'no-underline' });

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

// Interactive (clickable) tag
const linkClassName = tagVariants({ variant: 'taxonomyTag', interactive: true });

// Non-interactive (display only) tag
const spanClassName = tagVariants({ variant: 'taxonomyTag', interactive: false });

// With additional classes
const className = tagVariants({ variant: 'taxonomyTag', className: 'no-underline' });

Variants

Variant	Description
`'taxonomyTag'`	Pill-style outline tag with light border, subtle text, hover states

Parameters

Param	Type	Default	Description
`variant`	`TagVariant`	`'taxonomyTag'`	Tag style variant
`interactive`	`boolean`	`true`	Adds cursor-pointer when true, cursor-default when false
`className`	`string`	-	Additional CSS classes

Usage

Used by:

ListFilters – filter chips in List organism
ContentTaxonomies – subject/technology tags on content pages
TaxonomyTags – via tagClassName prop
TechnologyTags – technology term pills with icons

Notes

Base style: rounded border, light text, transparent background, hover darkening
Includes inline-flex items-center gap-2 for icon + label layout
Use with Link, a, or span depending on interactivity