Status badgedata-display
Non-interactive status label (lozenge) with six semantic tones, subtle/solid/dot variants and a typed status-to-tone map.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/status-badge의존 아이템style
Default
status-badge-demo.tsx
import { CheckIcon } from "lucide-react";import { STATUS_TONES, StatusBadge, defineStatuses, resolveStatus } from "@/components/ui/status-badge";
const orderStatuses = defineStatuses({ pending: { tone: "warning", label: "Pending" }, paid: { tone: "success", label: "Paid" }, refunded: { tone: "neutral", label: "Refunded" }, failed: { tone: "destructive", label: "Payment failed" },});
const unknown = { tone: "neutral", label: "Unknown" } as const;
export default function StatusBadgeDemo() { return ( <div className="flex flex-col gap-4"> <div className="flex flex-wrap gap-2"> {STATUS_TONES.map((tone) => ( <StatusBadge key={tone} tone={tone}> {tone} </StatusBadge> ))} </div> <div className="flex flex-wrap gap-2"> {STATUS_TONES.map((tone) => ( <StatusBadge key={tone} tone={tone} variant="solid"> {tone} </StatusBadge> ))} </div> <div className="flex flex-wrap gap-4"> {STATUS_TONES.map((tone) => ( <StatusBadge key={tone} tone={tone} variant="dot" size="md"> {tone} </StatusBadge> ))} </div> <div className="flex flex-wrap gap-2"> {["pending", "paid", "refunded", "failed", "archived"].map((status) => { const def = resolveStatus(orderStatuses, status, unknown); return ( <StatusBadge key={status} tone={def.tone} size="md"> {def.tone === "success" ? <CheckIcon data-icon="inline-start" /> : null} {def.label} </StatusBadge> ); })} </div> </div> );}