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.

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.

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

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-neutral-900 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 rounded-full px-2.5 py-1 text-xs font-medium transition-transform duration-200 ease-out hover:scale-105 ${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-amber-500 opacity-75 motion-reduce:hidden" />          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-amber-500" />        </span>      )}      {children}    </span>  );}