Badge

Feedback

Stablev1.0.0

Small status indicator or label component for displaying metadata, tags, or status

Preview

DefaultPrimarySecondarySuccessErrorWarningInfoOutline

SmallMediumLarge

Installation

npx @component-labs/cli add badge

This will:
- Install required dependencies
- Copy the Badge component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Badge } from "@component-labs/ui";

<Badge>New</Badge>

Props

Name	Type	Default	Description
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "error" \| "warning" \| "info" \| "outline"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Badge size
`icon`	`ReactNode`	`-`	Icon to display before the text
`removable`	`boolean`	`false`	Whether the badge can be removed
`onRemove`	`() => void`	`-`	Callback when badge is removed
`children*`	`ReactNode`	`-`	Badge content
`className`	`string`	`-`	Additional CSS classes

Examples

Basic

Simple badge

<Badge>New</Badge>

Variants

Different badge variants

<div className="flex gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="info">Info</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Sizes

Different badge sizes

<div className="flex items-center gap-2">
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
</div>

With Icon

Badge with an icon

import { Star } from "lucide-react";

<Badge icon={<Star className="h-3 w-3" />}>
  Featured
</Badge>

Removable

Badge that can be removed

const [tags, setTags] = useState(["React", "TypeScript", "Vite"]);

<div className="flex gap-2">
  {tags.map((tag) => (
    <Badge
      key={tag}
      removable
      onRemove={() => setTags(tags.filter(t => t !== tag))}
    >
      {tag}
    </Badge>
  ))}
</div>

Status Indicators

Using badges for status

<div className="flex gap-2">
  <Badge variant="success">Active</Badge>
  <Badge variant="error">Inactive</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="info">Draft</Badge>
</div>

Performance

Bundle Size

~1.5KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Semantic HTML elements
•Keyboard accessible remove buttons
•Screen reader friendly
•Proper ARIA labels for interactive badges