Components
Status Tag
Semantic read-only status pills using functional color families — success, warning, info, destructive, and neutral.
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).
Installing
pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/status-tag.jsonnpx shadcn@latest add https://ui.isaacfei.com/r/status-tag.jsonyarn dlx shadcn@latest add https://ui.isaacfei.com/r/status-tag.jsonbun x shadcn@latest add https://ui.isaacfei.com/r/status-tag.jsonWith 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="auto">Pending</StatusTag>Examples
ActivePendingProcessingFailedDraft
icon="auto" (tone presets)
PaidPendingProcessingFailedProcessing
"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="auto" (tone presets)</p>
<div className="flex flex-wrap gap-2">
<StatusTag tone="success" icon="auto">
Paid
</StatusTag>
<StatusTag tone="warning" icon="auto">
Pending
</StatusTag>
<StatusTag tone="info" icon="auto">
Processing
</StatusTag>
<StatusTag tone="destructive" icon="auto">
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);"auto"picks a default per tone;"spin"shows a spinner (in-progress only).children: label text.className: merged onto the wrapper span.
Data-table schema columns use kind: "status" with a StatusVariantMap — each variant key maps to { label, tone?, icon? }. See Data Table.