FairGarden Design

Tag

The topic tag: a subject icon plus a caps label, with no container. It marks taxonomy and can link to its topic.

import { Tag } from '@fairgarden-private/design/components/Tag'

Topic tags keep caps: author the label in sentence case. The icon is the tag's only color, in --role-accent; small label text never takes an accent. icon takes an inventory name or a registered subject symbol's SVG, drawn at the 20 px tag tier in currentColor. Pass href to make the tag a link: its label underlines on hover. Tags print as icon plus label.

Plain and linked

Plain and linked

Land protectionClean waterNo icon
Land protectionClean water
TagVariants.tsx
import { Tag } from '@fairgarden-private/design/components/Tag'
import { park, waterDrop } from '../subjects'
import styles from './variants.module.css'

/** A topic tag is an icon plus a caps label, with no container; `href` links it to its topic. */
export function TagVariants() {
  return (
    <div className={styles.stack}>
      <div className={styles.row}>
        <Tag icon={park}>Land protection</Tag>
        <Tag icon={waterDrop}>Clean water</Tag>
        <Tag>No icon</Tag>
      </div>
      <div className={styles.row}>
        <Tag icon={park} href="#land">
          Land protection
        </Tag>
        <Tag icon={waterDrop} href="#water">
          Clean water
        </Tag>
      </div>
    </div>
  )
}

Primary and secondary

Primary and secondary

secondary is the taxonomy scale and colors only the icon. primary inks the label and focus ring.

Scope accentIndigo taxonomyOrange taxonomyPrimary plum
TagColor.tsx
import { Tag } from '@fairgarden-private/design/components/Tag'
import { park, waterDrop } from '../subjects'
import styles from './color.module.css'

/** `secondary` is the taxonomy scale and colors the icon only; `primary` inks the label. */
export function TagColor() {
  return (
    <div className={styles.row}>
      <Tag icon={park}>Scope accent</Tag>
      <Tag icon={waterDrop} secondary="indigo">
        Indigo taxonomy
      </Tag>
      <Tag icon={park} secondary="orange">
        Orange taxonomy
      </Tag>
      <Tag icon={park} primary="plum">
        Primary plum
      </Tag>
    </div>
  )
}

On grounds

On paper and forest

paper

Land protectionClean water

forest

Land protectionClean water
TagGrounds.tsx
import { Tag } from '@fairgarden-private/design/components/Tag'
import { PresetGround } from '@/components/PresetGround'
import { park, waterDrop } from '../subjects'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** The icon takes the ground's accent; the label stays the text ink. */
export function TagGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Tag icon={park}>Land protection</Tag>
          <Tag icon={waterDrop} href="#water">
            Clean water
          </Tag>
        </PresetGround>
      ))}
    </div>
  )
}

API Reference

A topic tag: an icon plus a caps label (type-label at weight 700, authored in sentence case; topic tags keep caps [D160]), with no container. Color sits on the icon only, never on the small label text. Pass href to link it to its topic.

PropTypeDescription
href
string | undefined

Makes the tag a link to its topic; it renders an <a> and gains the link states.

icon
| ReactElement
| 'menu'
| 'search'
| 'circle'
| 'arrow_forward'
| 'arrow_upward'
| 'expand_more'
| 'close'
| 'remove'
| 'add'
| 'check'
| 'chevron_right'
| 'chevron_left'
| 'more_horiz'
| 'play_arrow'
| 'pause'
| 'download'
| 'zoom_in'
| 'zoom_out'
| 'recenter'
| 'help'
| 'mail'
| undefined

The topic’s subject symbol, Material Symbols Rounded at the tag tier (20 px, FILL 0): an inventory name, or a registered subject symbol’s SVG element, which the tag sizes and fills in currentColor [D166]. It carries the tag’s only color, --role-accent.

primary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: the label ink and focus ring. Never defaulted; omitted, it inherits the scope [D133].

secondary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'amber'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale: the taxonomy scale, which colors the icon through --role-accent. Omitted, it inherits the scope.

tag
type tag = tag
TagProps

Props for Tag: span props, render, the link target, the icon and the color axes.

type TagProps = React.ClassAttributes<HTMLSpanElement> &
  React.HTMLAttributes<HTMLSpanElement> &
  __type & {
    href?: string;
    icon?:
      | ReactElement
      | 'menu'
      | 'search'
      | 'circle'
      | 'arrow_forward'
      | 'arrow_upward'
      | 'expand_more'
      | 'close'
      | 'remove'
      | 'add'
      | 'check'
      | 'chevron_right'
      | 'chevron_left'
      | 'more_horiz'
      | 'play_arrow'
      | 'pause'
      | 'download'
      | 'zoom_in'
      | 'zoom_out'
      | 'recenter'
      | 'help'
      | 'mail';
    primary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | null;
    secondary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | 'amber'
      | 'blue'
      | 'cyan'
      | 'grass'
      | 'green'
      | 'jade'
      | 'lime'
      | 'mint'
      | 'orange'
      | 'sky'
      | 'teal'
      | 'yellow'
      | null;
  }

Specification: DESIGN-SYSTEM.md §10.11 (badge, tag and chip) and §6.10 (subject symbols).