Cards & layout

Badge

Free

A small status pill with neutral, success, and warning tones.

DraftShippedIn reviewLive

npx shadcn@latest add @ui-shrushank/badge

The install writes a single file to components/ui/Badge.tsx, which exports Badge.

tsx
import { Badge } from "@/components/ui/Badge";
tsx
<Badge>Label</Badge>

The status pill.

Neutral / success / warning tones, each keyed by more than colour.

The tone plus its shape/label means a colour-blind user isn't guessing.

Every line below was read out of the file you are about to copy, so you can check each one against the source at the bottom of this page.

  • Has an explicit prefers-reduced-motion branch: the animation is dropped for an instant state change, and the component stays fully usable without it.

1 required, 1 optional.

tone
BadgeTone · default "neutral"
childrenrequired
React.ReactNode

One file, no runtime package. Copy it, or install it with the command at the top of this page.

Badge.tsx
type BadgeTone = "neutral" | "success" | "warning" | "live";const tones: Record<BadgeTone, string> = {  neutral: "bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300",  success: "bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-400",  warning: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",  live: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400",};export function Badge({ tone = "neutral", children }: { tone?: BadgeTone; children: React.ReactNode }) {  return (    <span      className={`inline-flex items-center gap-1.5 h-6 rounded-full px-2.5 text-xs font-medium ${tones[tone]}`}    >      {tone === "live" && (        <span className="relative flex h-1.5 w-1.5">          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-600 opacity-75 dark:bg-emerald-400 motion-reduce:hidden" />          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-600 dark:bg-emerald-400" />        </span>      )}      {children}    </span>  );}