Components

Badge

A small status descriptor for UI elements. Use badges to highlight statuses, categories, or counts with multiple visual variants.

Preview

Badge

Secondary

Destructive

Outline

Installation

npx blackboard-ui@latest add badge

Usage

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

export default function Example() {
  return <Badge>Badge</Badge>;
}

Examples

Default

Badge

<Badge>Badge</Badge>

Variants

Badge

Secondary

Destructive

Outline

<Badge variant="default">Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

With Icon

Place icons before or after the label. SVG icons inside the badge are automatically sized to 12px.

Deleting

Generating

<Badge variant="destructive">
  <LoaderCircle className="animate-spin" />
  Deleting
</Badge>
<Badge variant="secondary">
  Generating
  <LoaderCircle className="animate-spin" />
</Badge>

API Reference

Badge

Prop	Type	Default
variant	"default" \| "secondary" \| "outline" \| "destructive"	"default"
size	"default" \| "sm" \| "lg"	"default"
className	string	—

Also accepts all standard HTMLDivElement attributes (onClick, className, etc.).