Badge

A sliver of film glass for labels and counts; semantic variants are tinted glass, not paint.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/badge.json

Examples

Variants

NeutralAccentStableBetaDeprecatedOutline

"use client";

import { Badge } from "@/components/ui/badge";

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2.5">
      <Badge>Neutral</Badge>
      <Badge variant="accent">Accent</Badge>
      <Badge variant="success">Stable</Badge>
      <Badge variant="warning">Beta</Badge>
      <Badge variant="destructive">Deprecated</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

API

<Badge />

Prop	Type	Default	Description
variant	"neutral" \| "accent" \| "success" \| "warning" \| "destructive" \| "outline"	"neutral"	Visual treatment.
asChild	boolean	false	Render the child element with badge styling.