Badge

A small status indicator component for labeling, categorizing, or showing counts.

Installation

Terminal

ReactTailwind

TSX

npx @uiblox/cli add badge

Visual Variations

Toggle between three different visual styles: solid (filled), soft (tinted background), and outline (bordered).

Status Badges

NewActivePending

Status indicators

With Icon

VerifiedFeatured

Enhanced labels

Counts

399+12

Notification counts

Basic Usage

New

Copy & paste ready

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

<Badge>New</Badge>

Variants

All Variants

Default

Secondary

Success

Warning

Destructive

Outline

Copy & paste ready

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Common Use Cases

Status Indicators

Active

Pending

Inactive

ReactTailwind CSSCopy & paste ready

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Inactive</Badge>

With Icons

Verified

Secure

ReactTailwind CSSCopy & paste ready

<Badge variant="success" className="gap-1">
  <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
  </svg>
  Verified
</Badge>
<Badge variant="default" className="gap-1">
  <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
  </svg>
  Secure
</Badge>

Notification Counts

ReactTailwind CSSCopy & paste ready

<button className="relative p-2">
  <svg className="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
  </svg>
  <Badge className="absolute -top-1 -right-1 h-5 w-5 justify-center p-0">3</Badge>
</button>

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "success" \| "warning" \| "destructive" \| "outline"	"default"	The visual style of the badge
className	string	-	Additional CSS classes to apply

Source Code

Copy this code into src/components/ui/badge.tsx:

badge.tsx

ReactTailwind

TSX

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400",
        secondary: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
        success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
        destructive: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
        outline: "border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  );
}

export { Badge, badgeVariants };