Data Display
Forms
Navigation
Badge
A badge or a component that looks like a badge.
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge>Badge</Badge>;
}
Installation
pnpm dlx cnippet@latest add badge
Usage
import { Badge } from "@/components/ui/badge"<Badge>Badge</Badge>Link
You can use the render prop to make another component look like a badge. Here's an example of a link that looks like a badge.
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
export function LinkAsBadge() {
return <Badge render={<Link href="/pricing" />}>New</Badge>
}Examples
Variants
Outline
BadgeSecondary
BadgeDesctructive
BadgeInfo
BadgeSuccess
BadgeWarning
BadgeError
Badgeimport { Badge } from "@/components/ui/badge";
export default function Particle() {
return (
<div className="space-y-4">
<div className="flex justify-between gap-10">
<p className="text-xs">Outline</p>
<Badge variant="outline">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Secondary</p>
<Badge variant="secondary">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Desctructive</p>
<Badge variant="destructive">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Info</p>
<Badge variant="info">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Success</p>
<Badge variant="success">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Warning</p>
<Badge variant="warning">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Error</p>
<Badge variant="error">Badge</Badge>
</div>
</div>
);
}
Sizes
Small
BadgeLarge
Badgeimport { Badge } from "@/components/ui/badge";
export default function Particle() {
return (
<div className="space-y-4">
<div className="flex justify-between gap-10">
<p className="text-xs">Small</p>
<Badge size="sm">Badge</Badge>
</div>
<div className="flex justify-between gap-10">
<p className="text-xs">Large</p>
<Badge size="lg">Badge</Badge>
</div>
</div>
);
}