"use client";
import { Badge } from "@/components/ui/badge";
export function Demo() {
return (
<div className="flex flex-wrap gap-6">
<Badge>Generated</Badge>
<Badge tone="yellow">Pending approval</Badge>
<Badge tone="green">Completed</Badge>
</div>
);
}
pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/badge.jsonimport { Badge } from "@/components/ui/badge"import type { ComponentProps } from "react";
export function Badge({
tone = "blue",
className = "",
children,
...props
}: ComponentProps<"span"> & { tone?: "blue" | "yellow" | "green" | "muted" }) {
const color = {
blue: "text-[#79bdff]",
yellow: "text-[#ffd15b]",
green: "text-[#93d6a1]",
muted: "text-[#929da7]",
}[tone];
return (
<span
className={`inline-flex items-center gap-2 font-mono text-xs ${color} ${className}`}
{...props}
>
<span aria-hidden="true">[</span>
{children}
<span aria-hidden="true">]</span>
</span>
);
}
Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.