QuackElements
Browse components+
Components/Badge

Badge

A compact label for statuses, categories, and short metadata.

Interactive example

AlphaIn reviewDraftBlocked

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add badge

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { Badge } from "@/components/quack/badge"

export function BadgeDemo() {
  return (
    <div className="flex gap-2">
      <Badge>Alpha</Badge>
      <Badge variant="secondary">In review</Badge>
      <Badge variant="outline">Draft</Badge>
    </div>
  )
}