components / display
Badge
Compact badge to show a status, count, or category.
453 B gzip runs on the server · 0 JS
defaultnewdraftarchivedfailed
badge-default.tsx
import { Badge } from "@/components/ui/badge";
export default function BadgeDefault() {
return (
<div className="flex flex-wrap items-center justify-center gap-2">
<Badge>default</Badge>
<Badge variant="brand">new</Badge>
<Badge variant="outline">draft</Badge>
<Badge variant="muted">archived</Badge>
<Badge variant="destructive">failed</Badge>
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/badge.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Badge } from "@/components/ui/badge"
<Badge variant="brand">new</Badge>API
Badge
A styled <span>. Server component: sends no JS.
| prop | type | default |
|---|---|---|
variantVisual style. | "default" | "brand" | "outline" | "muted" | "destructive" | "default" |
classNameExtra classes, merged with | string | - |