Label Tag

Use Label Tag for categorical enums that do not imply good/bad/urgent — category, channel, role, type, and similar dimensions. Never assign semantic status tones to these fields; use Status Tag when the value carries lifecycle or severity meaning. Full rules: Tag Selection.

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/label-tag.json

npx shadcn@latest add https://ui.isaacfei.com/r/label-tag.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/label-tag.json

bun x shadcn@latest add https://ui.isaacfei.com/r/label-tag.json

With a namespace: npx shadcn@latest add @f-ui/label-tag.

Usage

import { LabelTag } from '@/components/f-ui/label-tag';
import { resolveLabelAccent } from '@/components/f-ui/label-tag-accent';

<LabelTag>Apparel</LabelTag>
<LabelTag accent="accent-2">Food</LabelTag>
<LabelTag accent={resolveLabelAccent(rawValue)}>{rawValue}</LabelTag>

Examples

Default neutral pill and optional chart accent palette.

"use client";

import { Tag } from "lucide-react";

import { LabelTag } from "@/components/f-ui/label-tag";
import { resolveLabelAccent } from "@/components/f-ui/label-tag-accent";

export function LabelTagDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <LabelTag>Neutral</LabelTag>
      <LabelTag accent="accent-1">Accent 1</LabelTag>
      <LabelTag accent="accent-2">Accent 2</LabelTag>
      <LabelTag accent="accent-3">Accent 3</LabelTag>
      <LabelTag accent="accent-4">Accent 4</LabelTag>
      <LabelTag accent="accent-5">Accent 5</LabelTag>
      <LabelTag accent={resolveLabelAccent("electronics")}>Electronics</LabelTag>
      <LabelTag accent="accent-2" icon={<Tag aria-hidden />}>
        With icon
      </LabelTag>
    </div>
  );
}

API Reference

• accent: neutral (default) | accent-1 … accent-5 — chart token families, never semantic status colors.
• icon: optional leading icon (size-3, rendered before children).
• children: label text.
• className: merged onto the wrapper span.

resolveLabelAccent(value) (from label-tag-accent.ts): stable hash of a string → accent-1 … accent-5. Use in schema maps with accent: "auto".

Data-table schema columns use kind: "label" with a LabelVariantMap — each variant key maps to { label, accent? }. See Data Table.