Status Tag

Use Status Tag for lifecycle, outcome, or severity values — order status, payment result, priority, and similar fields where the tone carries meaning. It is a separate registry item from Label Tag (categorical enums without semantic color).

Status Tag is presentation of domain or derived values — it does not invent workflow truth. When frontend labels and backend enums differ, follow Domain Status Vs Derived View (Kinds A–D): map Kind A/B → tone + label in one mapper; never store a competing displayStatus on the client.

When To Use

• Lifecycle, outcome, or severity values where tone carries meaning (order status, payment result, priority).
• Map Kind A/B domain or derived values in one mapper — see Domain Status Vs Derived View.
• Prefer Label Tag for categorical enums without good/bad/urgent meaning.
• Do not invent workflow truth in the tag; it only presents mapped tone + label.

Installing

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

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

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

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

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

Usage

import { StatusTag } from '@/components/f-ui/status-tag';

<StatusTag tone="success">Active</StatusTag>
<StatusTag tone="warning" icon="preset">Pending</StatusTag>

Examples

"use client";

import { StatusTag } from "@/components/f-ui/status-tag";

export function StatusTagDemo() {
  return (
    <div className="space-y-6">
      <div className="grid max-w-xl grid-cols-2 gap-4 sm:grid-cols-3">
        <StatusTag tone="success">Active</StatusTag>
        <StatusTag tone="warning">Pending</StatusTag>
        <StatusTag tone="info">Processing</StatusTag>
        <StatusTag tone="destructive">Failed</StatusTag>
        <StatusTag tone="neutral">Draft</StatusTag>
      </div>
      <div className="space-y-2">
        <p className="text-muted-foreground text-xs">icon=&quot;preset&quot; (tone glyphs)</p>
        <div className="flex flex-wrap gap-2">
          <StatusTag tone="success" icon="preset">
            Paid
          </StatusTag>
          <StatusTag tone="warning" icon="preset">
            Pending
          </StatusTag>
          <StatusTag tone="info" icon="preset">
            Processing
          </StatusTag>
          <StatusTag tone="destructive" icon="preset">
            Failed
          </StatusTag>
          <StatusTag tone="info" icon="spin">
            Processing
          </StatusTag>
        </div>
      </div>
    </div>
  );
}

API Reference

• tone: success | warning | info | destructive | neutral — functional color family.
• icon: optional leading icon (size-3); "preset" picks the tone glyph; "spin" for in-flight; omit in table cells; "auto" is a deprecated alias of "preset" and does not mean provenance.
• children: label text.
• className: merged onto the wrapper span.

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