Badge

A versatile component for displaying small pieces of information such as status indicators, labels, tags, or counts. Perfect for categorization and highlighting important details.

Features

Multiple variants - Default, secondary, destructive, and outline styles
Flexible content - Text, icons, or combination
Semantic rendering - Can render as different elements using asChild
Accessible - Proper focus states and ARIA support
Responsive - Adapts to container and content size

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Usage

Basic Badges

DefaultSecondaryDestructiveOutline

components/data-display-examples/badge-examples.tsx→BasicBadgeExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function BasicBadgeExample() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function BasicBadgeExample() {  return (    <div className="flex flex-wrap gap-2">      <Badge>Default</Badge>      <Badge variant="secondary">Secondary</Badge>      <Badge variant="destructive">Destructive</Badge>      <Badge variant="outline">Outline</Badge>    </div>  );}

Status Indicators

User Status

ActivePendingInactiveError

Order Status

DraftProcessingShippedDelivered

components/data-display-examples/badge-examples.tsx→StatusBadgeExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function StatusBadgeExample() {
  const statuses = [
    { label: "Active", variant: "default" as const },
    { label: "Pending", variant: "secondary" as const },
    { label: "Inactive", variant: "outline" as const },
    { label: "Error", variant: "destructive" as const },
  ];

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="text-sm font-medium">User Status</h4>
        <div className="flex flex-wrap gap-2">
          {statuses.map((status) => (
            <Badge key={status.label} variant={status.variant}>
              {status.label}
            </Badge>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <h4 className="text-sm font-medium">Order Status</h4>
        <div className="flex flex-wrap gap-2">
          <Badge variant="outline">Draft</Badge>
          <Badge variant="secondary">Processing</Badge>
          <Badge variant="default">Shipped</Badge>
          <Badge variant="outline">Delivered</Badge>
        </div>
      </div>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function StatusBadgeExample() {  const statuses = [    { label: "Active", variant: "default" as const },    { label: "Pending", variant: "secondary" as const },    { label: "Inactive", variant: "outline" as const },    { label: "Error", variant: "destructive" as const },  ];  return (    <div className="space-y-4">      <div className="space-y-2">        <h4 className="text-sm font-medium">User Status</h4>        <div className="flex flex-wrap gap-2">          {statuses.map((status) => (            <Badge key={status.label} variant={status.variant}>              {status.label}            </Badge>          ))}        </div>      </div>      <div className="space-y-2">        <h4 className="text-sm font-medium">Order Status</h4>        <div className="flex flex-wrap gap-2">          <Badge variant="outline">Draft</Badge>          <Badge variant="secondary">Processing</Badge>          <Badge variant="default">Shipped</Badge>          <Badge variant="outline">Delivered</Badge>        </div>      </div>    </div>  );}

Badges with Icons

CompletedPendingFailedWarning

components/data-display-examples/badge-examples.tsx→BadgeWithIconExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function BadgeWithIconExample() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="default">
        <CheckCircle />
        Completed
      </Badge>
      <Badge variant="secondary">
        <Clock />
        Pending
      </Badge>
      <Badge variant="destructive">
        <XCircle />
        Failed
      </Badge>
      <Badge variant="outline">
        <AlertCircle />
        Warning
      </Badge>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function BadgeWithIconExample() {  return (    <div className="flex flex-wrap gap-2">      <Badge variant="default">        <CheckCircle />        Completed      </Badge>      <Badge variant="secondary">        <Clock />        Pending      </Badge>      <Badge variant="destructive">        <XCircle />        Failed      </Badge>      <Badge variant="outline">        <AlertCircle />        Warning      </Badge>    </div>  );}

Interactive Badges

Removable Tags

ReactTypeScriptTailwindNext.js

Clickable Categories

components/data-display-examples/badge-examples.tsx→InteractiveBadgeExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function InteractiveBadgeExample() {
  const [tags, setTags] = useState([
    "React",
    "TypeScript",
    "Tailwind",
    "Next.js",
  ]);

  const removeTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove));
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="text-sm font-medium">Removable Tags</h4>
        <div className="flex flex-wrap gap-2">
          {tags.map((tag) => (
            <Badge key={tag} variant="secondary" className="gap-1">
              {tag}
              <button
                onClick={() => removeTag(tag)}
                className="ml-1 hover:bg-black/10 rounded-full p-0.5"
                aria-label={`Remove ${tag} tag`}
              >
                <X className="h-3 w-3" />
              </button>
            </Badge>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <h4 className="text-sm font-medium">Clickable Categories</h4>
        <div className="flex flex-wrap gap-2">
          <Badge asChild>
            <button className="cursor-pointer hover:opacity-80">
              Frontend
            </button>
          </Badge>
          <Badge asChild variant="secondary">
            <button className="cursor-pointer hover:opacity-80">Backend</button>
          </Badge>
          <Badge asChild variant="outline">
            <button className="cursor-pointer hover:opacity-80">DevOps</button>
          </Badge>
        </div>
      </div>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function InteractiveBadgeExample() {  const [tags, setTags] = useState([    "React",    "TypeScript",    "Tailwind",    "Next.js",  ]);  const removeTag = (tagToRemove: string) => {    setTags(tags.filter((tag) => tag !== tagToRemove));  };  return (    <div className="space-y-4">      <div className="space-y-2">        <h4 className="text-sm font-medium">Removable Tags</h4>        <div className="flex flex-wrap gap-2">          {tags.map((tag) => (            <Badge key={tag} variant="secondary" className="gap-1">              {tag}              <button                onClick={() => removeTag(tag)}                className="ml-1 hover:bg-black/10 rounded-full p-0.5"                aria-label={`Remove ${tag} tag`}              >                <X className="h-3 w-3" />              </button>            </Badge>          ))}        </div>      </div>      <div className="space-y-2">        <h4 className="text-sm font-medium">Clickable Categories</h4>        <div className="flex flex-wrap gap-2">          <Badge asChild>            <button className="cursor-pointer hover:opacity-80">              Frontend            </button>          </Badge>          <Badge asChild variant="secondary">            <button className="cursor-pointer hover:opacity-80">Backend</button>          </Badge>          <Badge asChild variant="outline">            <button className="cursor-pointer hover:opacity-80">DevOps</button>          </Badge>        </div>      </div>    </div>  );}

Count Badges

4.8

components/data-display-examples/badge-examples.tsx→CountBadgeExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function CountBadgeExample() {
  return (
    <div className="flex flex-wrap gap-6">
      <div className="relative">
        <Bell className="h-6 w-6" />
        <Badge
          variant="destructive"
          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"
        >
          3
        </Badge>
      </div>

      <div className="relative">
        <Mail className="h-6 w-6" />
        <Badge
          variant="default"
          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"
        >
          12
        </Badge>
      </div>

      <div className="relative">
        <ShoppingCart className="h-6 w-6" />
        <Badge
          variant="secondary"
          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"
        >
          5
        </Badge>
      </div>

      <div className="flex items-center gap-1">
        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
        <Badge variant="outline">4.8</Badge>
      </div>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function CountBadgeExample() {  return (    <div className="flex flex-wrap gap-6">      <div className="relative">        <Bell className="h-6 w-6" />        <Badge          variant="destructive"          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"        >          3        </Badge>      </div>      <div className="relative">        <Mail className="h-6 w-6" />        <Badge          variant="default"          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"        >          12        </Badge>      </div>      <div className="relative">        <ShoppingCart className="h-6 w-6" />        <Badge          variant="secondary"          className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"        >          5        </Badge>      </div>      <div className="flex items-center gap-1">        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />        <Badge variant="outline">4.8</Badge>      </div>    </div>  );}

Custom Styled Badges

Priority Levels

High PriorityMedium PriorityLow Priority

Department Tags

EngineeringDesignMarketingSales

components/data-display-examples/badge-examples.tsx→CustomBadgeExample()✓ Auto-extracted

import { Badge } from "@helgadigitals/vera-ui";
import {
  CheckCircle,
  AlertCircle,
  XCircle,
  Clock,
  Bell,
  Mail,
  ShoppingCart,
  Star,
  X,
} from "lucide-react";
import { useState } from "react";
function CustomBadgeExample() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="text-sm font-medium">Priority Levels</h4>
        <div className="flex flex-wrap gap-2">
          <Badge className="bg-red-100 text-red-800 hover:bg-red-200">
            High Priority
          </Badge>
          <Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-200">
            Medium Priority
          </Badge>
          <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
            Low Priority
          </Badge>
        </div>
      </div>

      <div className="space-y-2">
        <h4 className="text-sm font-medium">Department Tags</h4>
        <div className="flex flex-wrap gap-2">
          <Badge className="bg-blue-100 text-blue-800">Engineering</Badge>
          <Badge className="bg-purple-100 text-purple-800">Design</Badge>
          <Badge className="bg-pink-100 text-pink-800">Marketing</Badge>
          <Badge className="bg-orange-100 text-orange-800">Sales</Badge>
        </div>
      </div>
    </div>
  );
}

import { Badge } from "@helgadigitals/vera-ui";import {  CheckCircle,  AlertCircle,  XCircle,  Clock,  Bell,  Mail,  ShoppingCart,  Star,  X,} from "lucide-react";import { useState } from "react";function CustomBadgeExample() {  return (    <div className="space-y-4">      <div className="space-y-2">        <h4 className="text-sm font-medium">Priority Levels</h4>        <div className="flex flex-wrap gap-2">          <Badge className="bg-red-100 text-red-800 hover:bg-red-200">            High Priority          </Badge>          <Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-200">            Medium Priority          </Badge>          <Badge className="bg-green-100 text-green-800 hover:bg-green-200">            Low Priority          </Badge>        </div>      </div>      <div className="space-y-2">        <h4 className="text-sm font-medium">Department Tags</h4>        <div className="flex flex-wrap gap-2">          <Badge className="bg-blue-100 text-blue-800">Engineering</Badge>          <Badge className="bg-purple-100 text-purple-800">Design</Badge>          <Badge className="bg-pink-100 text-pink-800">Marketing</Badge>          <Badge className="bg-orange-100 text-orange-800">Sales</Badge>        </div>      </div>    </div>  );}

API Reference

Badge

The main badge component with support for different variants and styles.

Prop

Type

Variants

Default

Primary badge style with solid background and contrasting text.

<Badge variant="default">Default</Badge>

Secondary

Subtle badge style with muted colors.

<Badge variant="secondary">Secondary</Badge>

Destructive

Error or warning badge style with attention-grabbing colors.

<Badge variant="destructive">Error</Badge>

Outline

Minimal badge style with border and no background.

<Badge variant="outline">Outline</Badge>

Use Cases

Status Indication

User status - Online, offline, away, busy
Order status - Pending, processing, shipped, delivered
System status - Healthy, warning, error, maintenance
Payment status - Paid, pending, overdue, refunded

Categorization

Content tags - Technology, design, business categories
User roles - Admin, moderator, member, guest
Product labels - New, sale, featured, limited
Skill tags - Programming languages, frameworks, tools

Notifications

Count indicators - Unread messages, notifications
Alert badges - New features, updates, warnings
Achievement badges - Completed tasks, milestones
Rating displays - Star ratings, scores, rankings

Data Highlighting

Priority levels - High, medium, low priority items
Severity indicators - Critical, warning, info levels
Version tags - Release versions, build numbers
Feature flags - Beta, experimental, deprecated features

Accessibility

The Badge component includes:

Semantic markup - Proper element structure
Focus management - Keyboard navigation support when interactive
Color contrast - WCAG compliant color combinations
Screen reader support - Descriptive content for assistive technology
ARIA attributes - Enhanced accessibility information when needed

Best Practices

Visual Design

Use sparingly - Avoid badge overload in interfaces
Consistent meaning - Same colors should indicate same types of information
Appropriate sizing - Scale badges relative to surrounding content
Clear contrast - Ensure badges stand out from background

Content Guidelines

Concise text - Keep badge labels short and descriptive
Consistent language - Use standard terminology across your application
Clear hierarchy - Different variants should indicate different importance levels
Meaningful icons - Use recognizable icons that enhance understanding

Interactive Badges

Clear affordances - Make interactive badges obviously clickable
Hover states - Provide visual feedback on interaction
Focus indicators - Ensure keyboard users can navigate effectively
Accessible actions - Include proper ARIA labels for actions

Performance

Avoid excessive badges - Large numbers of badges can impact performance
Optimize icons - Use efficient icon implementations
Consider virtualization - For lists with many badged items
Lazy loading - Load badge content when needed

Alert - Larger message containers for important information
Avatar - User representation that can include status badges
Card - Containers that often include badge decorations
Table - Data tables that frequently use badges in cells

Badge

User Status

Order Status

Removable Tags

Clickable Categories

Priority Levels

Department Tags

On this page