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.

When To Use

• Categorical enums that do not imply severity — category, channel, role, type, dimension. Default is outline, no color.
• Prefer Status Tag when the value carries lifecycle or severity.
• Use accent identity dots only when many category tags sit on one object. Role, channel, and Auto stay undotted.
• Never semantic status tones; never bg-chart-* fill.
• Full selection 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="teal">payroll</LabelTag>
<LabelTag accent={resolveLabelAccent(rawValue)}>{rawValue}</LabelTag>

Examples

Default outline pills for Role, channel, and Auto; identity dots only when many category tags sit on one object.

"use client";

import { Lock } 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="space-y-6">
      <div className="space-y-2">
        <p className="text-muted-foreground text-xs">Default outline — Role, channel, Auto</p>
        <div className="flex flex-wrap gap-2">
          <LabelTag>Admin</LabelTag>
          <LabelTag>Web</LabelTag>
          <LabelTag>Auto</LabelTag>
          <LabelTag icon={<Lock aria-hidden />}>Month locked</LabelTag>
        </div>
      </div>
      <div className="space-y-2">
        <p className="text-muted-foreground text-xs">Identity dots — many tags on one object</p>
        <div className="flex flex-wrap gap-2">
          <LabelTag accent="teal">payroll</LabelTag>
          <LabelTag accent="violet">confidential</LabelTag>
          <LabelTag accent="ochre">q3</LabelTag>
          <LabelTag accent={resolveLabelAccent("hr-policy")}>hr-policy</LabelTag>
        </div>
      </div>
    </div>
  );
}

API Reference

• accent: neutral (default) | violet | magenta | teal | cyan | ochre | slate. Renders a leading identity dot. Use only when many category tags sit on one object. Schema accent: "auto" hashes the enum key (do not pass "auto" to the component). accent-1…accent-5 still compile; they map to hues and render as dots. Never semantic status tones; never bg-chart-* fill.
• icon: marker glyph only (lock). Not a substitute for the hue dot.
• children: label text.
• className: merged onto the wrapper span.

resolveLabelAccent(value) (from label-tag-accent.ts): stable hash of a string → a LabelHue. Use in schema maps with accent: "auto". Do not pass "auto" to the component.

Table field schema columns use f.enum({ render: "label" }) with a variant map — each variant key maps to { label, accent? }. See Field Types and Table examples.