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

Badge

Secondary

Badge

Desctructive

Badge

Info

Badge

Success

Badge

Warning

Badge

Error

Badge

import { 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

Badge

Large

Badge

import { 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>
  );
}

Badge

Installation

Usage

Link

Examples

Variants

Sizes

On this page